javascript - Highcharts how to add treemap upon click event on line chart?

Question

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link: https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/

When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.

Many thanks for your help!

var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??

const chart_1 = new Highcharts.stockChart('mychart_1', {
    chart: {
    zoomType: 'x',
    type: 'spline',
  },

  xAxis: {
    type: 'datetime',
    tickInterval: 86400000 * 7, //show each week
    ordinal: false,
    labels:{
      formatter: function() { 
        return Highcharts.dateFormat('%d %b %Y', this.value); 
        },
      align: 'right',
      rotation: -90,
    },
  },

  yAxis: {
    opposite: false,
    min: 0,
    max: 1,
    tickInterval: 0.1,
    title: {
      text: 'Score'
    }
  },

  legend: {
    enabled: true,
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top'
  },

  credits :  {
    enabled : false
  },
                
  navigator :{
    enabled: true
  },

  scrollbar :{
    enabled: true
  },

  rangeSelector: {
    enabled: true,
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 1,
      text: '1m'
    }, {
      type: 'all',
      text: 'All'
    }],
    selected: 1
  },

  series: [{
    name: 'sample1',
    data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
  }, {
    name: 'sample2',
    data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
  }, {
    name: 'sample3',
    data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
  }, {
    name: 'sample4',
    data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
  }, {
    name: 'sample5',
    data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
  }],

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false,
      },
      pointstart: 1527465600000,
      // pointInterval = 2,
      tooltip: {
        valueDecimals: 2
      },
    }
  },

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
    }]
  }

});

document.getElementById('button').addEventListener('click', e => {
  var series = chart_1.series[0];
  var series1 = chart_1.series[1]
  var series2 = chart_1.series[2];
  if (series.visible & series1.visible & series2.visible) {
    series.hide();
    series1.hide();
    series2.hide();
    e.target.innerHTML = 'Show samples 1-3';
  } else {
    series.show();
    series1.show();
    series2.show();
    e.target.innerHTML = 'Hide samples 1-3';
  }
})

Answer 1

Use click event callback function for a point and create another chart with treemap series, for example:

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        Highcharts.chart('treemapContainer', {
                            series: [{
                                type: 'treemap',
                                data: mytreemap_data
                            }]
                        })
                    }
                }
            },
            ...
        }
    }

---

Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/

API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click