score:5
Accepted answer
So, I got it right following this Post
Here is the code of the post
var weightChartOptions = {
responsive: true,
legendCallback: function(chart) {
console.log(chart);
var legendHtml = [];
legendHtml.push('<table>');
legendHtml.push('<tr>');
for (var i=0; i<chart.data.datasets.length; i++) {
legendHtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></div></td>');
if (chart.data.datasets[i].label) {
legendHtml.push('<td class="chart-legend-label-text" onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">' + chart.data.datasets[i].label + '</td>');
}
}
legendHtml.push('</tr>');
legendHtml.push('</table>');
return legendHtml.join("");
},
legend: {
display: false
}
};
// Show/hide chart by click legend
updateDataset = function(e, datasetIndex) {
var index = datasetIndex;
var ci = e.view.weightChart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
};
var ctx = document.getElementById("weightChart").getContext("2d");
window.weightChart = new Chart(ctx, {
type: 'line',
data: weightChartData,
options: weightChartOptions
});
document.getElementById("weightChartLegend").innerHTML = weightChart.generateLegend();
};
the secret here is the legendCallback in line 3
In this example he uses line chart, in my case I used bars
So i changed the table tags for list tags for me worked better this way
He emphasizes to put "window" before the variable who gets the "= new Chart"
window.weightChart = new Chart(ctx, {.....
Then with a little of CSS you can get a nice legend with a hide/show option
Source: stackoverflow.com
Related Query
- onClick event to Hide dataset Chart.js V2
- Catch event of show and hide dataset at chart.js
- Chart js :Adding onclick event on slice of doughnut chart is not working in react-chartjs-2
- Facing difficulty in opening a dialog from onClick event on a pie chart in angular 8 (using chart.js)
- Chart.js v2 hide dataset labels
- Chart.js - How to set a line chart dataset as disabled on load
- Is it possible in chartjs to hide certain dataset legends?
- How to add an on click event to my Line chart using Chart.js
- How do you hide the title of a chart tooltip?
- How to display Line Chart dataset point labels with Chart.js?
- Add DataSet Bar Chart - Chart.JS
- Click event on stacked bar chart - ChartJs
- How to add an offset to a dataset in Chart js
- How to add OnClick Event on labels in Chart.js v2.0?
- Chart.js bar chart : Grid color and hide label
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- get yLabel value onclick chart js
- How to hide section in a Chart.js Pie Chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Get X, Y onClick chart coordinates in ChartJS
- Map event position to y axis value in chartjs line chart
- Chart.js dataset controller 'null' when chart drawn
- In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
- hide dataset by default using Chart.js and a custom script
- How to get onClick Event for a Label in ChartJS and React?
- How to dynamically set ChartJs line chart width based on dataset size?
- Chartjs hide dataset legend v3
- Chart JS dataset disabled by default
- Chart JS Re-Animate chart with onclick
More Query from same tag
- How to set prop data for chart.js in React?
- Formatting Chart.js Chart
- Loop through array for chart.js input
- [Vue warn]: You may have an infinite update loop in watcher with expression "chartData"
- Snapshot testing ChartJS components with Jest
- JavaScript variable in an object
- Chart.js and react-chartjs-2 property translate is missing type
- Customizing Chart.js tool tips
- Put array in chart data
- Populating a chartJS with data from API through axios (VueJS)
- Chart.js v3 after using of zoom plugin instance persist in memory
- angular-chart.js showing black color chart in Firefox, Safari, and IE
- Unique identifier in Chartjs Bar segments?
- Limit numbers of labels on Chart.js in "smaller display only"
- chartjs - json data for scatter graph, issue with date
- Problem creating scatter graph using chart.js
- Chart.js change vertical position of points
- Can I specify a different font size for each row of text in Chart Title?
- Chartjs tooltip anchor point position on bar charts
- ChartJs days of the week from numbers
- How do I filter & update dates using react-chartjs-2
- How to create a chart-js pie chart with PHP data variables?
- Chart js how to toggle line without click
- How to show labels of dataset using chart.js
- How do i use chartjs in react project properly?
- Y scaling relative to the max value in my ChartJS chart
- Chartjs remove text striking on legend
- How to add image inside the doughnut chart using chart.js?
- Chart.js doughnut chart tooltip size?
- ChartJS: How to set a data point to be hidden by default?