CODEWITHSUNDEEP
javascriptangularjshighcharts
badigard
badigard

Reputation: 850

Multi-categories selection Chart 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 category of the chart.

Expect Behavior:

  1. On category (i.e - "0 - 1M") click, both bars should change color. Another click on the category will revert the color back.

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

I am using allowPointSelect: true, but it only select one column and not both columns of the category.

allowPointSelect: true,

Not sure how to continue from here.

JSfiddle here - http://jsfiddle.net/w7dvrkhz/9/

Any ideas please?

Upvotes: 0

Views: 628

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

1. This custom behavior can be easily programmed in callback function for plotOptions.series.point.events.click property:

  point: {
    events: {
        click: function() {
        var clickedPoint = this,
            chart = clickedPoint.series.chart;

        chart.series.forEach(function(s) {
            s.points.forEach(function(p) {
            if(p.x == clickedPoint.x) {
              p.select(null, true);
            }
          });
        });
      }
    }
  },

Live demo: http://jsfiddle.net/kkulig/d37x5mo7/

allowPointSelect needs to be disabled while using the above code.

API references:

2. I don't know much about Angular, but the event that I used in the 1st point seems to be good place to check which points are currently selected.

Upvotes: 2

Related Questions