Drill down in Line Chart Highcharts

Question

I have a scenario as something similar to this.

https://jsfiddle.net/31om2f6d/

Note that the data plotted in x-axis and data inside series is a list of 50 values (in this example, I have mentioned 6 values.) I need to drilldown into another three line charts which indicates the sum of the counts. For example, Point 50 in 2019.1 will be split into three points say(10,10,30) in the drilldown. Similarly the rest of the points as well.As a result, there should be 3 line charts when I drilldown from linechart of main page. Kindly help me out with this function. (The values for the drilldown is in the form of list as well.)

Note: I have been reading in forum like drilldown can be done only in point mapping and not when mapped in series. I am not sure if that is the exact behaivour. If so, kindly let me know how we can map a series of 50 dynamic data by points and drilldown from there.

Any help is appreciated. Thanks in Advance.

 Highcharts.setOptions({ colors: [ '#470303', '#c40a0a', '#a34d4d', '#eda4a4' ] }); Highcharts.chart('container-trend', { chart: { type: 'line', }, title: { text: 'Trend' }, exporting: { tableCaption: false, enabled: false }, credits: { enabled: false }, xAxis: { categories: [2019.1, 2019.2, 2019.3, 2019.4, 2019.5, 2019.6] }, yAxis: { title: { text: 'Counts ' } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true } }, series: [{ name: 'Total Counts', data: [50,70,30,40,50,20] }] });

 .highcharts-figure, .highcharts-data-table table { min-width: 360px; max-width: 800px; margin: 1em auto; }.highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #EBEBEB; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; }.highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; }.highcharts-data-table th { font-weight: 600; padding: 0.5em; }.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; }.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; }.highcharts-data-table tr:hover { background: #f1f7ff; }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <figure class="highcharts-figure"> <div id="container-trend" style="min-width: 310px; height: 320px; margin: 0 auto"></div> </figure>

Answer 1

Would you like to achieve something like here: https://jsfiddle.net/BlackLabel/f4bvud2q/ ?

  series: [{
    name: 'Total Counts',
    data: [{y: 50, drilldown: '2019.1'},70,30,40,50,20]
  }],
    drilldown: {
        series: [{
            name: '2019.1',
            id: '2019.1',
            data: [10, 10, 30]
        }]
    }

API: https://api.highcharts.com/highcharts/drilldown.series