I want to remove an element out of a Donout Chart from ApexCharts JavaScript version. What I have is a Chart with multiple elements and when I click a "slice" of the Donout that "slice" expands. I want to change this so when I click that element the chart removes that elements and changes the proportion. My chart looks like this:
var options = {
chart: {
type: 'donut',
width: '100%',
height: 400,
events: {
dataPointSelection: function(event, chartContext, config) {
console.log(event);
console.log(chartContext);
console.log(config);
}
}
},
title: {
text: 'Distribution of people',
align: 'center',
style: {
fontSize: '20px',
}
},
series: data['people'],
labels: datos['name_people'],
dataLabels: {
enabled: true,
enabledOnSeries: undefined,
textAnchor: 'middle',
distributed: false,
offsetX: 0,
offsetY: 0,
style: {
fontSize: '20px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
colors: undefined
},
background: {
enabled: true,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.9,
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I usually use Array.prototype.splice to remove a data point and label.
Than I call .updateOptions to update the chart
chart: {
type: 'donut',
events: {
dataPointSelection: function(event, chartContext, config) {
// remove the data point
data.splice(config.dataPointIndex,1);
// remove the label
labels.splice(config.dataPointIndex,1);
// we can't use .updateSeries because labels are seperated in piecharts
chartContext.updateOptions({
series: data,
labels: labels
}, true)
}
},
Here's a Codepen that demonstrates this