Synchronize two highcharts to drill down at once

Question

I have two highcharts in my application and one is a column graph and the other is a pie chart. In first column chart I'm displaying car sales over years and upon drill down on a year it shows sales y quarters. Then there is a separate pie chart which shows car sales by region. Upon drilling down a region it shows car sales by sub regions in the selected region. What I want is to synchronize these two charts. As an example initially column chart shows sales over years and pie chart shows sales over region. When I click on a Year then it should drill down to show sales by quarters and the pie chart also should get updated to show sales by region but only for that selected year in the column chart. I tried several ways, but could not get a solution for it. Is there a work around for this.

Following is a sample code that I used. https://jsfiddle.net/yasirunilan/erqm86k7/15/

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Car Sales'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent Car Sales'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    "series": [
        {
            "name": "Years",
            "colorByPoint": true,
            "data": [
                {
                    "name": "2015",
                    "y": 62.74,
                    "drilldown": "2015"
                },
                {
                    "name": "2016",
                    "y": 10.57,
                    "drilldown": "2016"
                },
                {
                    "name": "2017",
                    "y": 7.23,
                    "drilldown": "2017"
                },
                {
                    "name": "2018",
                    "y": 5.58,
                    "drilldown": "2018"
                },

            ]
        }
    ],
    "drilldown": {
        "series": [
            {
                "name": "2015",
                "id": "2015",
                "data": [
                    {
                        "name": "Q1",
                        "y": 0.4
                    },
                    {
                       "name": "Q2",
                        "y": 0.3
                    },
                    {
                        "name": "Q3",
                        "y": 0.2
                    },
                    {
                       "name": "Q4",
                        "y": 0.1
                    }
                ]
            },
            {
                "name": "2016",
                "id": "2016",
                "data": [
                    {
                        "name": "Q1",
                        "y": 0.1
                    },
                    {
                       "name": "Q2",
                        "y": 0.2
                    },
                    {
                        "name": "Q3",
                        "y": 0.2
                    },
                    {
                       "name": "Q4",
                        "y": 0.1
                    }
                ]
            },
            {
                "name": "2017",
                "id": "2017",
                "data": [
                    {
                        "name": "Q1",
                        "y": 0.1
                    },
                    {
                       "name": "Q2",
                        "y": 0.3
                    },
                    {
                        "name": "Q3",
                        "y": 0.2
                    },
                    {
                       "name": "Q4",
                        "y": 0.1
                    }
                ]
            },
            {
                "name": "2018",
                "id": "2018",
                "data": [
                    {
                        "name": "Q1",
                        "y": 0.1
                    },
                    {
                       "name": "Q2",
                        "y": 0.1
                    },
                    {
                        "name": "Q3",
                        "y": 0.3
                    }
                ]
            }
        ]
    }
});

// Create the chart
Highcharts.chart('container-pie', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Car Sales by Region'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent Car Sales'
        }

    },
    legend: {
        enabled: true
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    "series": [
        {
            "name": "Years",
            "colorByPoint": true,
            "data": [
                {
                    "name": "Asia",
                    "y": 62.74,
                    "drilldown": "Asia"
                },
                {
                    "name": "Europe",
                    "y": 10.57,
                    "drilldown": "Europe"
                },
                {
                    "name": "America",
                    "y": 7.23,
                    "drilldown": "America"
                },
                {
                    "name": "Australia",
                    "y": 5.58,
                    "drilldown": "Australia"
                },

            ]
        }
    ],
    "drilldown": {
        "series": [
            {
                "name": "Asia",
                "id": "Asia",
                "data": [
                    {
                        "name": "India",
                        "y": 0.1
                    },
                    {
                       "name": "Sri Lanka",
                        "y": 0.2
                    },
                    {
                        "name": "Japan",
                        "y": 0.3
                    },
                    {
                       "name": "Sigapoore",
                        "y": 0.4
                    }
                ]
            },
            {
                "name": "Europe",
                "id": "Europe",
                "data": [
                    {
                        "name": "UK",
                        "y": 0.1
                    },
                    {
                       "name": "Russia",
                        "y": 0.2
                    },
                    {
                        "name": "France",
                        "y": 0.3
                    },
                    {
                       "name": "Germany",
                        "y": 0.4
                    }
                ]
            },
            {
                "name": "America",
                "id": "America",
                "data": [
                    {
                        "name": "North America",
                        "y": 0.3
                    },
                    {
                       "name": "South America",
                        "y": 0.4
                    }
                ]
            },
            {
                "name": "Australia",
                "id": "Australia",
                "data": [
                    {
                        "name": "New Zeeland",
                        "y": 0.1
                    },
                    {
                       "name": "Australia",
                        "y": 0.5
                    }
                ]
            }
        ]
    }
});

daniel_s · Answer 1 · 2018-09-20T08:34:29.250

You need to implement a function, which would iterate on all charts you have, and inside of it call the doDrilldown() function on the points with the same index, basing on the point you clicked before. The best places to call created function are chart.events.drilldown and chart.events.drillup handlers.

Here is the example function, and usage:

function syncCharts(e, chart) {
  return e.type === 'drilldown' ?
    Highcharts.charts.forEach(c => {
      if (c !== chart) {
        var series = c.series[0],
          point = series.points[e.point.index];

        point.doDrilldown()
      }
    }) :
    Highcharts.charts.forEach(c => {
      c.drillUp();
    })
}

Usage:

  chart: {
    type: 'column',
    events: {
      drilldown(e) {
        syncCharts(e, this)
      },
      drillup(e) {
        syncCharts(e, this)
      }
    }
  },

Live example: https://jsfiddle.net/9am0srkq/

API Reference:

https://api.highcharts.com/highcharts/chart.events.drilldown

https://api.highcharts.com/highcharts/chart.events.drillup

In here what happens is when I drill down the other chart also gets drilled down, that's also correct, but what I actually need is, when I click on 2018, it should only show sales distribution in pie chart for regions without drilling down to regions in pie chart. Can we do that? — yasii92, Sep 20 '18 at 10:34
So, you need to `update()` the chart with new series data in your `drilldown` event handler. Here is the documentation: https://api.highcharts.com/class-reference/Highcharts.Chart#update . There you can find the example of use. — daniel_s, Sep 21 '18 at 09:22

Synchronize two highcharts to drill down at once

1 Answers1