change VueJS component data value from inside Highchart event

Question

I'm using vue2-highcharts to build a pie chart. In my component, which contains the HighCharts chart, there is a Boolean variable named showOverlay. I'm trying to change the showOverlay value when a HighCharts click event occurs.

The component code is:

<template>
  <section class="charts">
    <vue-highcharts :options="pieOptions" ref="pieChart"></vue-highcharts>
  </section>
</template>

<script>
  /* eslint-disable */
  import VueHighcharts from 'vue2-highcharts'
  export default {
    components: {
      VueHighcharts
    },
    props: ['score', 'show'],
    data() {
      return {
        showOverlay: false,
        pieOptions:
          {
            chart: {
              type: "pie",
              options3d: {
                enabled: false,
                alpha: 45
              }
            },
            plotOptions: {
              pie: {
                innerSize: 100,
                depth: 45
              },
              series: {
                cursor: 'pointer',
                point: {
                  events: {
                    click: function (e) {
                      // ----- HERE I WANT TO SET showOverlay -----
                      // ----- for example: this.showOverlay = false -----
                      alert('Category: ' + this.name + ', value: ' + this.y);
                    }
                  }
                }
              }
            },
            series: [
              {
                name: "Platform Score",
                data: [
                  ["Spotify", 3],
                  ["Deezer", 1]
                ]
              }
            ]
          }
      }
    },
    methods: {
    }
  }
</script>

As you can see, I marked in the code where I want to change the showOverlay value, but this holds the HighCharts instance at that line, and I can't figure out how to access the Vue instance to change the showOverlay value.

Worth mentioning: the final goal is to $emit the change to the parent component. I found a relevant suggestion in another post, moving the data setup into the mounted hook and using an arrow-function:

mounted () {
  const that = this;
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
          that.$emit('somethingHappened', 'someData');
        }
      } 
    }]
  })
}

but when I tried it with a bit of modification:

mounted () {
    const that = this;
    this.$refs.pieChart.chart(this.$el, { 
      series: [{ 
        events: {
          click: () => { 
            that.$emit('somethingHappened', 'someData')
          }
        } 
      }]
    })
  },

I got the following error:

this.$refs.pieChart.chart is not a function

How can I tackle this?

Answer 1

Inside your component's data, changing pieOptions.plotOptions.series.point.events.click to an arrow-function would provide the Vue instance as this inside the handler. The HighCharts series point (previously this in your click-handler) is stored in the event argument as point, so your pieOptions Vue data should look something like this:

click: ({point}) => {
  this.showOverlay = false;
  alert('Category: ' + point.name + ', value: ' + point.y);
  this.$emit('somethingHappened', 'someData');
}

demo