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:

      <div class="chart">
        <div class="chart-line">

    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

  • 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.



Log in to reply