CODEWITHSUNDEEP
javascriptvue.jshighcharts
Bruce Yu
Bruce Yu

Reputation: 113

How to access Highcharts stock tooltip data in Vue?

I'm using Highcharts stock in Vue, what I want to implement is when I hover one stock point, the tooltip shows up, and at the same time, at other places may be top of the stock chart, as same as data in tooltip in other styles. My way is to export data in the tooltip formatter function, but in the formatter function this doesn't refer to Vue instance. I wonder if there any way I can access hovering tooltip data, or if there any other way can realize the effect.

the effect i want to realize

<template>
  <div>
    <div class="outerTooltip">open: xxx</div>
    <highcharts :constructor-type="'stockChart'" :options="stockOptions"></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import stockInit from "highcharts/modules/stock";
import { data } from "./stockData";

stockInit(Highcharts);

export default {
  name: "StockVue",
  computed: {
    stockOptions() {
      return {
        ...,
        tooltip: {
          shared: true,
          formatter(){
            console.log(this)
            // how can i export data in this to Vue, so i can show it in outerTooltip dynamically
            retuen `
              open: ${this.points[0].point.open}
            `
          }
        }
      }
    }
  }
}

codesandbox example

Upvotes: 0

Views: 451

Answers (2)

Bruce Yu
Bruce Yu

Reputation: 113

Assign the reference of the Vue instance to a variable that worked for me.

export default {
  name: "StockVue",
  method: {
    exportTooltipData(data){
      console.log(data)
    }
  },
  computed: {
    stockOptions() {
      const exportFn = this.exportTooltipData;
      return {
        ...,
        tooltip: {
          shared: true,
          formatter(){
            exportFn(this);
            retuen `
              open: ${this.points[0].point.open}
            `
          }
        }
      }
    }
  }
}

Upvotes: 0

Dominik Chudy
Dominik Chudy

Reputation: 1080

I think that you only need to assign the reference of the Vue instance to a variable and then use it in formatter function. Remember also to add a reference to the computed property.

Demo: https://codesandbox.io/s/highcharts-vue-test-forked-c7pvw?file=/src/components/StockVue.vue

Upvotes: 1

Related Questions