CODEWITHSUNDEEP
javascriptjquerychartshighcharts
user8229791
user8229791

Reputation:

Highcharts connecting scatter chart and pie chart with single legend

I'm trying to connect two different charts (a scatter and a pie chart) using the same legend. Upon printing to console, it seems like javascript is fetching the correct data of the correct pie chart. It just won't connect to the scatter chart legend. I tried what these answers suggested too: HighCharts: One Legend, Two Charts and Multiple pie-charts in the same chart with HighCharts

I'm using this code in my series.events of the scatter chart:

        events: {
                    legendItemClick: function (event) {
                        console.log(this.options.name);
                        var donut = $('#pie_chart').highcharts(),
                        series_arr = donut.series[0].data;
                        console.log(series_arr);
                        for (series in series_arr) {
                            if (this.options.name === series.name) {
                                if (this.visible) {
                                series.visible = true;
                            } else {
                                series.visible = false;
                            }
                        }
                    }
                }
            }

Am I missing something here? Here is my fiddle

Upvotes: 4

Views: 183

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

plotOptions will be as

 plotOptions: {
  column: {
    stacking: ''
  },
  series: {
    pointPadding: 0.2,
    borderWidth: 0,
    dataLabels: {
      //enabled: false
    },
    events: {
      legendItemClick: function(event) {
        console.log(this.options.name);
        var donut = $('#pie_chart').highcharts(),
          series_arr = donut.series[0].data;
        //console.log(series_arr);
        for (series in series_arr) {
          if (this.options.name === series_arr[series].name) {
            if (this.visible) {
              series_arr[series].setVisible(false);

            } else {
              series_arr[series].setVisible(true)

            }

          }
        }
      }
    }
  }
},

Forked Fiddle

Error is

this.options.name === series.name

and it will be

this.options.name === series_arr[series].name

and use setVisible() to toggle

Upvotes: 1

Related Questions