ApexCharts: Dynamically set annotation



  • 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



  • 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


Log in to reply