0

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

2 Answers 2

1

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

0
0

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}
            `
          }
        }
      }
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.