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
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- What kind of graph could I use to achieve this with ChartJS (or similar)?
- Is it possible to draw a bar and arrow/pointer on the right side of a chart?
- grouped bar dataset in djanog template loop
- Accordion won't take up height of chart for first click
- Sort one array and keep other two arrays in sync
- Chart.js Show labels on Pie chart
- React js Unhandled Rejection (TypeError): t[l].data.map is not a function
- Vertical line across multiple charts
- Drawing a line at a fixed angle relative to data with Chart.js
- Chart.js, adding footer to chart
- Chartjs hide dataset legend v3
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- chart js different callback labels
- Y axis set custom value using chart.js
- Cannot rotate label in chart js annotations plugin
- Chart js how to remove numbers on circles of polar chart
- ChartJs Horizontal line
- React chart2js Line chart with multiple datasets overlapping
- Chart JS not displaying graph
- Chart.js - add data to line chart from clicking pie chart segment
- ChartJS won't draw graph inside bootstrap tab until window resize
- How to make gap in chart.js graph?
- LinearGradient doesnt't work on chartJs canvas for Angular
- Dynamically created linechart holds previous data value
- Chart.js drag points on linear chart
- Javascript and chart.js, how to add euro currency to y label
- Chart.js line chart does not render data lines on iOS
- Chartjs unexpected visual animation effect when adding data
- Why does chart update fail when its container has ng-show on it?