Quiero eliminar un elemento de un gráfico de Donout de la versión JavaScript de ApexCharts. Lo que tengo es un gráfico con varios elementos y cuando hago clic en un "segmento" del Donout, ese "segmento" se expande. Quiero cambiar esto para que cuando haga clic en ese elemento, el gráfico elimine esos elementos y cambie la proporción. Mi gráfico se ve así:
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();Usualmente uso Array.prototype.splice para eliminar un punto de datos y una etiqueta. Entonces llamo .updateOptions para actualizar el gráfico
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) } },Aquí hay un Codepen que demuestra esto