score:0
Accepted answer
you can use the toggledatavisibility
for pie and doughnut charts and setdatasetvisibility
for all the other chart types
live example:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
borderwidth: 1
}
]
},
options: {
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
const chart = new chart(ctx, options);
document.getelementbyid("mybtn").addeventlistener("click", () => {
const {
type
} = chart.config;
if (type === 'pie' || type === 'doughnut') {
// pie and doughnut charts only have a single dataset and visibility is per item
chart.toggledatavisibility(0);
} else {
chart.setdatasetvisibility(0, !chart.isdatasetvisible(0));
}
chart.update();
});
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<button id="mybtn">
hide dataset
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.3.2/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How to hide a dataset with your own button?
- How to hide tooltips with their respective dataset
- How to display Line Chart dataset point labels with Chart.js?
- how to hide 0 value on Yaxis in Chart.js with negative values
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- how to hide specific dataset based on condition chartjs angular
- How to hide / not draw bars with 0 / null / undefined values?
- chart.js pie chart - how to update dataset with smooth transition
- How to add a ChartPoint to a DataSet in Chart.js with TypeScript?
- How to write better code in es6 for formatting an object with array values
- chartjs - show hide specific dataset with click on element outside graph
- How to run Chart.js samples using source code
- How to fill my chart (chart.js) with my own data from API
- Chart.js v2 hide dataset labels
- Chart.js - How to set a line chart dataset as disabled on load
- How to hide y axis line in ChartJs?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Is it possible in chartjs to hide certain dataset legends?
- How to disable a tooltip for a specific dataset in ChartJS
- Chart.js Line-Chart with different Labels for each Dataset
- How to prevent first/last bars from being cut off in a chart with time scale
- How to use percentage scale with Chart.js
- How to import Chart.js with Webpack
- How do you hide the title of a chart tooltip?
- How to drill down charts with ChartJS?
- Chartjs linechart with only one point - how to center
- How to fix chart Legends width-height with overflow scroll in ChartJS
- chart js how to fill legend box with colour
- How to fix bars in Chart.js with long labels
- How to add an offset to a dataset in Chart js
More Query from same tag
- Chart.js - How to create an auto-scaling line diagram for a big amount of data happenning over time
- Chart.js updating-animations of radar-charts
- How to filter dropdown based on the choice of another dropdown in JS?
- Chart.js with handlebar.js shows empty canvas
- Django + Chart.js Am I Doing This Right? Nothing is being rendered
- How can i add additional Data(Type) to chart.js
- Cannot call a function in Javascript - Chart.js
- chartjs - Drawing vertical line on integer x axis value
- chart.js why are my hover effects not working?
- react-chartjs-2 fill property not working?
- Chartjs Legend Styling
- Reverse tick order
- Add a click event to the bar chart of chartjs
- How to manipulate different charts by angular
- Display labels on bar chart using Chart.js
- Programmatically open and close Chart.js tooltip
- Making my website interactive with the size of the screen/browser
- ChartJS Update Tooltip programmatically in V2
- How can I change the starting point of horizontal bars in Charts.js
- Chartjs numbers on bar chart flash on hover
- ChartJS - aligning axis labels after rotation
- Chart.js have the y-axis step from 20 to 1 (instead of 1 to 20)
- donut chart JS/Jquery that allows HTML tags in its label?
- ChartJS Tooltip Customization
- Display two datasets from an array using chart.js in node.js
- Angular-chartjs expression/value inside canvas class
- How can I automatically wrap tooltip text content to multiple lines?
- How to change bar fillColor in chart.js bar char
- chart.js addData breaks function v1.0.2
- Chart.js Vertically Aligned points on single x axis