Как получить значения из всех графиков в всплывающей подсказке

Question

Я использую Highcharts в среде vue. js. Я использую https://www.highcharts.com 7.2.0 и Highcharts- Vue https://github.com/highcharts/highcharts-vue#readme 1.3.5.

У меня есть несколько таблиц High-Stock на одной странице. Я пытаюсь получить значения из всех графиков во всплывающей подсказке, которую я сейчас нахожу.

Основываясь на этом http://jsfiddle.net/mjsdnngq/14/ Я пытаюсь создать свой код

Это то, что у меня сейчас есть

vue template

<template>
  <div class="vessChart" v-on:mousemove="updateCoordinates" >  
    <v-card :loading=!this.getStreamPlots.done>
      <highcharts ref="chart" :constructor-type="'stockChart'" :callback="chartcallback" :options="options" ></highcharts>  
    </v-card>
  </div>   
</template>

Это «опции», как я определяю их для диаграммы как vue объект данных

options: {  
              tooltip: {
                shared: true, 
                pointFormat: '{series.name}: {point.y}<br>' 
              },
              chart: {
                type: "line", 
                zoomType: 'x'
              },
              title: {
                text: this.streamChart.title
              }, 
              rangeSelector: {
                inputEnabled: false
              },
              xAxis: {   
                ordinal: false,
                type: 'datetime', 
                tickInterval: 5 * 60 * 1000 , 
                labels: { 
                  enabled:false
                },
                events : {
                    afterSetExtremes : this.afterSetExtremes
                } 
              },
              yAxis: {
                title: {
                  text: this.streamChart.title
                },
                labels: {
                  enabled:true
                },
                alignTicks:'left', 
                textAlign:'left',
                align:'middle',
                opposite:false
              },   
              plotOptions: {
                series: {
                  animation: false
                }
              },
              responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        chart: {
                            height: 300
                        },
                        subtitle: {
                            text: null
                        },
                        navigator: {
                            enabled: false
                        },
                        legend: {
                          enabled: true
                        },
                        yAxis: {
                          title: {
                            enabled: false
                          }
                        }
                    }
                }]
              },  
              series: [
                { 
                  name: this.streamChart.title,
                  pointStart: 1546300800000,
                  pointInterval: 5 * 60 * 1000 
                }
              ]
            },

когда Highstock загружается, я использую callback, чтобы получить его и установить его как локальный vue var, а также pu sh в массиве в хранилище vuex, чтобы я мог иметь все доступные диаграммы.

chartcallback(hc){
              this.chart=hc;
              this.currentId = this.streamChart.id;
              this.chartData = this.chartData.concat(this.getStreamPlots[this.currentId].data); 
              this.addStreamCharts(hc);  //push it to an array in vuex store
              this.chart.series[0].setData(this.chartData, true, true, true);   
            },  

и затем я использую updateCoordinates, чтобы получить все значения из всех диаграмм, которые я сохранил в хранилище vuex, используя searchPoint. Затем введите значения во всплывающую подсказку на диаграмме, которую я сейчас нахожу

updateCoordinates(e){   
              if (this.getStreamPlots.done && this.chart != null) {                 
                let hce = this.chart.pointer.normalize(e);   
                let points=[];
                this.getStreamCharts.forEach(chart => {  
                    let point = chart.series[0].searchPoint(hce, true); 
                    points.push(point);
                });          
                this.chart.tooltip.refresh(points);  
              } 
            }

Проблемы:

1 - Это работает, но показывает все значения для первой диаграммы, которую я навесил. Например, при наведении на первый график я получаю все значения во всплывающей подсказке, как и должен. Но затем я перехожу на третий график, и значения все еще отображаются во всплывающей подсказке первого графика. Нет подсказки на третьем графике.

2- Значения находятся в разных подсказках. Я хотел бы, чтобы все значения были в одной подсказке. (проверьте изображение)

Спасибо