Highcharts connecting scatter chart and pie chart with single legend

Question

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

How about linkedTo option, which allows you to comibne two series into a one legend item. — Sebastian Bochan

Deep 3015 Deep 3015 · Accepted Answer · 2017-06-30T10:29:08

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

Highcharts connecting scatter chart and pie chart with single legend

1 Answers