How to add annotation for candlestick apexcharts on javascript

Question

I'm working on candlestick apexcharts and trying now to add annotaion from code that getting form https://apexcharts.com/vue-chart-demos/line-charts/line-chart-annotations.

  <script>
    var options = {
      chart: {
        height: 750,
        type: 'candlestick',
        annotations: {
         xaxis: [{
              x: new Date(1538780400000),
              strokeDashArray: 0,
              borderColor: '#775DD0',
              label: {
                borderColor: '#775DD0',
                style: {
                  color: '#fff',
                  background: '#775DD0',
                },
                text: 'Anno Test',
              }
            }],
        },
      },
      series: [{
        data: [
          {
            x: new Date(1538778600000),
            y: [6629.81, 6650.5, 6623.04, 6633.33],
          },
          {
            x: new Date(1538780400000),
            y: [6632.01, 6643.59, 6620, 6630.11]
          },
          {
            x: new Date(1538782200000),
            y: [6630.71, 6648.95, 6623.34, 6635.65],
          }
        ]
      }],
      title: {
        text: 'CandleStick Chart',
        align: 'left'
      },
      xaxis: {
        type: 'datetime'
      },
      yaxis: {
        tooltip: {
          enabled: true
        }
      }
    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

    chart.render();
  </script>

Upon code can render chart correctly but no annotaion appear. Any advice or guidance on this would be greatly appreciated, Thanks

Answer 1

The annotations property should not be inside chart prop. It should be outside.

chart: {
    height: 750,
    type: 'candlestick',
},
annotations: {
    xaxis: [{
        x: 1538780400000,
        strokeDashArray: 0,
        borderColor: '#775DD0',
        label: {
            borderColor: '#775DD0',
            style: {
                color: '#fff',
                background: '#775DD0',
            },
            text: 'Anno Test',
        }
    }],
}