score:9
Accepted answer
the problem is that you have only one dataset and your code use the index
of legend item clicked to hide datasets[index]
.
on the contrary you need to hide single item data as below:
var meta = chart.getdatasetmeta(0);
var item = meta.data[index];
check the fiddle updated: https://jsfiddle.net/beaver71/aa2n39s2/
Source: stackoverflow.com
Related Query
- Chart.js HTML custom legend issues with doughnut chart
- Legend isnt moving to the right on my doughnut chart created with chart.js
- Doughnut chart from Chart.js, custom legend and call of original handler not works as expected
- Modify the legend of a double doughnut with chart js
- ChartJS custom legend doughnut separate legend from chart area
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- How can I add functionality to Chartjs Doughnut chart custom legend
- Custom Legend with ChartJS v2.0
- chart js how to fill legend box with colour
- ChartJS bar chart with legend which corresponds to each bar
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- Extending Line Chart with custom line
- Increase padding between legend and chart with react-chartjs-2
- Chartjs doughnut chart with gradient color
- Using Chart.js - Creating Legend for Doughnut Chart
- Custom data position on the doughnut chart in chart.js
- Angular chart how to show the legend data value by default along with legend name
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- Chart Js update legend boxes of graph with graph line style
- Responsive Chart.js Doughnut Chart with minimum height
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Create a arc like doughnut chart with Chart js plugins
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Force ChartJS to show Doughnut chart with null values
- ChartJs - Round borders on a doughnut chart with multiple datasets
- Chartjs Custom Legend with Time on Y-axis
- Doughnut chart updates with twice the data
- Chart js custom separate legend returns error when clicking legend
- React with chart js, labelling problems in multiple datasets for doughnut chart
More Query from same tag
- Rotating a chart.js pie chart with two datapoints to align both sectors on horizontal axis
- Chart.js find visible data points following zoom
- Multiple bubble chart datasets for chartjs
- generate multiple charts via loop for chart js
- Django and ChartJS
- How to put indicator between yAxis values on yAxis chartJs?
- Chart js - set width to a specific bar
- Add Extra label in a pie chart
- How to implement scattered chart using chart.js which is not available by default?
- Can't trigger beforeDraw with Vue-Chartjs (or any other plugins)
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Using ChartJS and JSON to render charts; Appending JSON Data to javascript yields an empty object in console.log
- Add mouseout event handler to legends in Chart.js
- Charts not being displayed in django app when using Chart.js 3.6 version
- Stack grouped xAxes in bar chart
- Add a label to a point of a bubble graph (Chart.js)
- ChartJs: x-axes min and max value not working
- On click of legend, bar is hiding without issue but data value is not hiding in charts.js
- [Vue warn]: You may have an infinite update loop in watcher with expression "chartData"
- Chart.js : Is there a way to name each bubble in chart?
- Gradient line chart with ChartJS
- format y axis labels in bold
- Replace Chart.js Data during `onClick` causes _meta error
- ChartJS getting an unwanted line between first data point and last data point
- TypeScript issue with custom plugin and afterDraw callback Chart.js and react-chartjs-2
- Chart.js Adapting different X axis with same scale
- Extjs with Devexpress ChartJS
- Chart.js radar chart ticks are hidden behind the graph
- Right way to Plot Dynamic Grouped Bar chart.js
- Chart.js: changing tooltip template