var options = {
  series: [
    {
      name: 'Price',
      data: series.monthDataSeries1.prices,
    },
  ],
  chart: {
    height: 350,
    type: 'line',
    id: 'areachart-2',
  },
  annotations: {
    yaxis: [
      {
        y: 8200,
        borderColor: '#00E396',
        label: {
          borderColor: '#00E396',
          style: {
            color: '#fff',
            background: '#00E396',
          },
          text: 'Support',
        },
      },
      {
        y: 8600,
        y2: 9000,
        borderColor: '#000',
        fillColor: '#FEB019',
        opacity: 0.2,
        label: {
          borderColor: '#333',
          style: {
            fontSize: '10px',
            color: '#333',
            background: '#FEB019',
          },
          text: 'Consolidation zone',
        },
      },
    ],
    xaxis: [
      {
        x: new Date('23 Nov 2025').getTime(),
        strokeDashArray: 0,
        borderColor: '#775DD0',
        label: {
          borderColor: '#775DD0',
          style: {
            color: '#fff',
            background: '#775DD0',
          },
          text: 'Earnings',
        },
      },
      {
        x: new Date('26 Nov 2025').getTime(),
        x2: new Date('28 Nov 2025').getTime(),
        fillColor: '#B3F7CA',
        opacity: 0.4,
        label: {
          borderColor: '#B3F7CA',
          style: {
            fontSize: '10px',
            color: '#fff',
            background: '#00E396',
          },
          offsetY: -10,
          text: 'Holiday week',
        },
      },
    ],
    points: [
      {
        x: new Date('01 Dec 2025').getTime(),
        y: 8607.55,
        marker: {
          size: 8,
          fillColor: '#fff',
          strokeColor: 'red',
          radius: 2,
          cssClass: 'apexcharts-custom-class',
        },
        label: {
          borderColor: '#FF4560',
          offsetY: 0,
          style: {
            color: '#fff',
            background: '#FF4560',
          },

          text: 'Analyst upgrade',
        },
      },
      {
        x: new Date('08 Dec 2025').getTime(),
        y: 9340.85,
        marker: {
          size: 0,
        },
        image: {
          path: '../../assets/images/ico-instagram.png',
        },
      },
    ],
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'straight',
  },
  grid: {
    padding: {
      right: 30,
      left: 20,
    },
  },
  title: {
    text: 'Line with Annotations',
    align: 'left',
  },
  labels: series.monthDataSeries1.dates.map(function (d) {
    return d.replace('2017', '2025')
  }),
  xaxis: {
    type: 'datetime',
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()