Redraw Doughnut Legend WIth New Dataset
Redraw Doughnut Legend WIth New Dataset
I have a doughnut chart which loads data when the page loads. this works fine but then I have a dropdown which changes the data from the initial load. I have the chart loading the new data fine but my legend is not updating and displays the data labels from the initial page load.
I have tried
chart.clear().destory()
but it doesn't re-draw. Below is my code which is working for redrawing the chart
$(function() {
let $statusDropdown = $('.js-status-select');
let statusData = jsonData.map(item => item[$statusDropdown.find(":selected").val()])
let labels = jsonData.map(item => item.serviceName)
let graphData = {'data': statusData, 'labels': labels}
if (graphData.data.length > 0) {
const data = {
labels: graphData.labels,
datasets: [{
data: graphData.data
}],
};
const config = {
type: 'doughnut',
data: data,
options: {
plugins: {
legend: {
position: 'right'
}
}
}
}
let chart = new Chart(
document.getElementById('js-broadband-estate-report'),
config
)
$statusDropdown.on('change', function (){
chart.data.datasets[0].data = jsonData.map(item => item[$(this).val()]);
chart.update()
})
}
})
<div class="row">
<div class="col-xs-12">
<div id="graphDiv" style="width: 45%; height: 45%; margin: auto">
<canvas id="js-broadband-estate-report" width="450" height="450"></canvas>
</div>
</div>
</div>
The chart.update()
works for updating the chart but as I say it doesn't update my legend
This question has an accepted answers - jump to answer
Answers
You'd need to ask in the support forum / channel of whatever chart library it is that you are using. This forum is for DataTables specific questions.
Allan
@allen you are entirely correct. I have no idea why I have asked it here and realised I wasted the entire previous day googling for an answer thinking datatable. Obviously a bad day for me yesterday, clearly lol