Как обновить значения тепловой карты, нажимая на точки линейного графика?

Question

В следующем коде я пытаюсь реализовать линейный график, где при нажатии на заданную точку открывается всплывающее окно на тепловой карте, значения которой зависят от точки, по которой вы щелкнули.Мне нужно следующее поведение: вы нажимаете на первую точку слева, и тепловая карта показывает значения 0; 100; 0; 100, и если вы закрываете всплывающее окно и затем нажимаете на точку посередине, она открывает всплывающее окно сзначения 1;2;3;4 В настоящее время поведение состоит в том, что тепловая карта принимает значение точки, по которой щелкнули, но она не обновляется.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

<script src="https://code.highcharts.com/modules/annotations.js"></script>

<h1></h1>


<div id="line_graph"></div>

<div id="brick_div">
    <br>
    <a href="#" onclick="hs.close(this)">
        Close
    </a>
    <div id="brick_scores"></div>
</div>






<script language="JavaScript">
series = [
    {
        "data": [
            {
                "values": [
                    [0, 100],
                    [0, 100]
                ],
                "y": 20
            },
            {
                "values": [
                    [1, 2],
                    [3, 4]
                ],
                "y": 66.66
            },
            {
                "values": [
                    [5, 6],
                    [7, 8]
                ],
                "y": 66.66
            },
        ]
    }
]


brick_chart = Highcharts.chart('brick_scores', {

 chart: {
     type: 'heatmap',
 },


 series: [{
     data: series[0]['data'][0]['values'],
     dataLabels: {
         enabled: true,
         color: '#000000'
     }
 }]

});

chart = Highcharts.chart('line_graph', {

    chart: {
        height: 600
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false,
                enabled: false,
                size:30
            },
            pointStart: 0,
            cursor: "pointer",
            point: {
                events: {
                    click: function (e) {
                        var data_point = series[0]['data'][this.x]['values']

                        brick_chart.series[0].setData(data_point, true)
                        brick_chart.redraw()
                        hs.htmlExpand(
                            null,
                            {
                                pageOrigin: {
                                    x: e.pageX || e.clientX,
                                    y: e.pageY || e.clientY
                                },
                                contentId: 'brick_div'
                            }
                        )
                    }
                }
            }
        }
    },

    series: series,

});
</script>