ApexCharts: Dynamically set annotation

[philipp]

Hi guys,
I am using Apex Charts for Vue to display some line charts and have a little problem:

There is a component which holds a measurementType string provided via prop and shows a line chart:

<SingleLineMeasurementGraph :measurementType="getMachineReadableType" :measurementData="data.getAllMeasurements" />

Inside of the component template section looks like this:

<template>
  <div class="chart">
    <div class="chart-line">
      <apexchart
        type="line"
        height="300"
        :options="chartOptions"
        :series="this.getMeasurementDataTransformed"
      ></apexchart>
    </div>
  </div>
</template>

Within chartOptions config I would like to set y-axis annotation dynamically in dependency of the given measurementType prop. Unfortunately it only shows an annotation with values 62 and 105, but never 3 and 11.

data () {
    return {
      chartOptions: {
        annotations: {
          yaxis: [
            {
              y: this.measurementType === 'GLUCOSE' ? 3 : 62,
              y2: this.measurementType === 'GLUCOSE' ? 11 : 105,
              borderColor: '#000',
              fillColor: '#00ff00',
              opacity: 0.15,
              label: {
                text: ' '
              }
            }
          ]
...

I already tried to put the condition in a computed property instead and exchanged the prop with a local boolean variable, but it did not work either. There seems to be a problem with reactiveness. Do I have to force the chart to re-render after changing the value maybe?

Any help is highly appreciated.

Kind regards
Philipp

[s.molinari]

The question is, does Vue-ApexCharts (which I am assuming you are using) make its chartOptions reactive or allow for it. This seems to be an answer to that question.

https://github.com/apexcharts/vue-apexcharts/issues/87

Scott