PieChart = { const graphWidth = 900; const graphHeight = 500; const graphData = [ { name: "Worldwide", center: ["25%"], size: "60%", data: [ { platform: "Mobile", y: 58.86 }, { platform: "Desktop", y: 38.98 }, { platform: "Tablet", y: 2.14 }, { platform: "Others", y: 0.02 } ], innerSize: "50%" }, { name: "India", center: ["75%"], size: "60%", data: [ { platform: "Mobile", y: 75.18 }, { platform: "Desktop", y: 24.4 }, { platform: "Tablet", y: 0.42 }, { platform: "Others", y: 0.0 } ], innerSize: "50%" } ]; const graphContainer = html`

`; Highcharts.chart(graphContainer, { credits: false, // removes highchart watermark, chart: { plotBackgroundColor: true, plotBorderWidth: null, plotShadow: false, type: "pie" }, title: { text: "Desktop vs Mobile vs Tablet Market Share - Worldwide vs India" }, subtitle: { text: 'Source: statcounter.com (April-2022 to March-2023)' }, tooltip: { headerFormat: '\u25CF {series.name}', pointFormat: "
{point.platform}: {point.y}% of total
" }, accessibility: { point: { valueSuffix: "%" } }, plotOptions: { pie: { allowPointSelect: true, cursor: "pointer", dataLabels: { enabled: true, format: "{point.platform}: {point.y} %", connectorColor: "silver" } } }, series: graphData }); return graphContainer; }