<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Line Chart with Annotations</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 650px; margin: 35px auto; } </style> </head> <body> <div id="chart"> </div> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script src="../../assets/stock-prices.js"></script> <script> var options = { annotations: { yaxis: [{ y: 8200, borderColor: '#FEB019', label: { borderColor: '#333', style: { fontSize: '15px', color: '#333', background: '#FEB019', }, text: 'Y-axis annotation', } }], xaxis: [{ x: new Date('23 Nov 2017').getTime(), borderColor: '#00E396', label: { borderColor: '#00E396', style: { fontSize: '15px', color: '#fff', background: '#00E396', }, offsetY: -10, text: 'Vertical', } }], points: [{ x: new Date('01 Dec 2017').getTime(), y: 9025, label: { borderColor: '#FF4560', offsetY: 0, style: { fontSize: '15px', color: '#fff', background: '#FF4560', }, text: 'All time high', } }] }, chart: { width: 350, height: 220, type: 'line', sparkline: { // enabled: true } }, plotOptions: { bar: { columnWidth: '50%' } }, markers: { size: 0 }, dataLabels: { enabled: false }, stroke: { curve: 'straight' }, series: [ { type: 'bar', data: series.monthDataSeries2.prices }, { type: 'line', data: series.monthDataSeries1.prices }], legend: { show: false, }, labels: series.monthDataSeries1.dates, xaxis: { type: 'datetime', labels: { show: false } }, yaxis: { labels: { show: false } } } var chart = new ApexCharts( document.querySelector("#chart"), options ); chart.render(); // adding annotation through chart instance by calling direct method chart.addYaxisAnnotation({ y: 9000, borderColor: '#FEB019', label: { borderColor: '#333', style: { fontSize: '15px', color: '#333', background: '#FEB019', }, text: 'Y-axis - runtime', } }); chart.addXaxisAnnotation({ x: new Date('25 Nov 2017').getTime(), borderColor: '#00E396', label: { orientation: 'vertical', borderColor: '#00E396', style: { fontSize: '15px', color: '#fff', background: '#00E396', }, offsetY: -10, text: 'xaxis - runtime', } }); chart.addPointAnnotation({ x: new Date('17 Nov 2017').getTime(), y: 9425, label: { borderColor: '#FF4560', offsetY: 0, style: { fontSize: '15px', color: '#fff', background: '#FF4560', }, text: 'Point - runtime', } }) </script> </body> </html>