Multiselect columns in Highcharts

I am struggling with creating a multi-select column chart in highcharts.
My goal is to let the user be able to select / deselect any pair of columns from the chart.

Expect Behavior:

  1. On category click (i.e – the user clicks on one of “0 – 1M” bars), both bars should change color. Another click will revert the color.

  2. How to notify the external app (AngularJS) of the selected columns?

I am using the events for select and deselect like this:

select: function() {
                                    console.log('select:' + this.selected);
unselect: function() {
                                    console.log('unselect:' + this.selected);

But not sure how to continue from here.

JSfiddle here –

Any ideas please?

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.