<!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>Simple Pie</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 380px; margin: 35px auto; } </style> </head> <body> <div id="chart"> <apexchart type=pie width=380 :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=pie width=380 :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: [44, 55, 13, 43, 22], chartOptions: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } } }] } }, }) </script> </body> </html>