<!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> <script> window.Promise || document.write( '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>' ) window.Promise || document.write( '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>' ) window.Promise || document.write( '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>' ) </script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script> <script src="../../assets/stock-prices.js"></script> </head> <body> <div id="app"> <div id="chart"> <apexchart type="line" height="350" :options="chartOptions" :series="series"></apexchart> </div> </div> <!-- Below element is just for displaying source code. it is not required. DO NOT USE --> <div id="html"> <div id="chart"> <apexchart type="line" height="350" :options="chartOptions" :series="series"></apexchart> </div> </div> <script> new Vue({ el: '#app', components: { apexchart: VueApexCharts, }, data: { series: [{ data: series.monthDataSeries1.prices }], chartOptions: { 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: 'Y-axis range', } }], xaxis: [{ x: new Date('23 Nov 2017').getTime(), strokeDashArray: 0, borderColor: '#775DD0', label: { borderColor: '#775DD0', style: { color: '#fff', background: '#775DD0', }, text: 'Anno Test', } }, { x: new Date('26 Nov 2017').getTime(), x2: new Date('28 Nov 2017').getTime(), fillColor: '#B3F7CA', opacity: 0.4, label: { borderColor: '#B3F7CA', style: { fontSize: '10px', color: '#fff', background: '#00E396', }, offsetY: -10, text: 'X-axis range', } }], points: [{ x: new Date('01 Dec 2017').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: 'Point Annotation', } }, { x: new Date('08 Dec 2017').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, xaxis: { type: 'datetime', }, }, }, }) </script> </body> </html>