var options = {
series: [3400, 900, 300, 200],
chart: {
type: 'unit',
height: 470,
animations: {
enabled: true,
speed: 900,
},
},
labels: ['Passed first time', 'Passed after a fix', 'Waived', 'Failed'],
colors: ['#00A96E', '#00B8A9', '#FFAB00', '#FF4560'],
plotOptions: {
unit: {
layout: 'custom',
// A stroke shape from apexcharts/unit-shapes.
positions: 'check',
transition: 'flow',
unitValue: 6,
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()