<!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, Column & Area</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 650px; margin: 35px auto; } </style> </head> <body> <div id="chart"> <apexchart type=line height=350 :options="chartOptions" :series="series" /> </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" /> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script> <script> new Vue({ el: '#chart', components: { apexchart: VueApexCharts, }, data: { series: [{ name: 'TEAM A', type: 'column', data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: 'TEAM B', type: 'area', data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: 'TEAM C', type: 'line', data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], chartOptions: { chart: { stacked: false, }, stroke: { width: [0, 2, 5], curve: 'smooth' }, plotOptions: { bar: { columnWidth: '50%' } }, fill: { opacity: [0.85, 0.25, 1], gradient: { inverseColors: false, shade: 'light', type: "vertical", opacityFrom: 0.85, opacityTo: 0.55, stops: [0, 100, 100, 100] } }, labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003', '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003' ], markers: { size: 0 }, xaxis: { type: 'datetime' }, yaxis: { title: { text: 'Points', }, min: 0 }, tooltip: { shared: true, intersect: false, y: { formatter: function (y) { if (typeof y !== "undefined") { return y.toFixed(0) + " points"; } return y; } } } } }, }) </script> </body> </html>