var options = {
series: [6200, 2400, 2000, 1000],
chart: {
type: 'unit',
height: 470,
animations: {
enabled: true,
speed: 900,
},
},
labels: ['Solar farms', 'Rooftop solar', 'Wind', 'Hydro'],
colors: ['#FFAB00', '#F2994A', '#00A6A0', '#1565C0'],
plotOptions: {
unit: {
layout: 'custom',
// One of the shapes in apexcharts/unit-shapes.
positions: 'sun',
transition: 'flow',
unitValue: 20,
clusterLabels: {
// Outer labels: each band is named in the margin with a leader line to its
// own dots, so the crowd reads without a legend.
external: {
show: true,
},
},
},
},
legend: {
show: false,
},
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()