score:-3
onlegendclick: function (e) {
var series = e.target;
series.isvisible() ? series.hide() : series.show();
},
dxcharts have a function called onlegendclick, a few others are onseriesclick and onpointclick. i hope this helps.
score:0
i've found no way to do this. it's easy to put some onclick behaviour on the legend template, and you can easily change the series stroke and colors alpha channel to 0 so that the area and stroke disappear but i've found no way to do this on points.
i've decided to use google charts for this particular chart, and chart.js whenever i do not need that behavior, hoping that the good creators of chart.js will add it in the future.
score:1
an update to @benallansmith answer, the link to the documentation is now :
https://www.chartjs.org/docs/latest/configuration/legend.html
my version of the example code, to have datasets 2 and 3 hidden while clicking on legend for dataset 1 (datasets 2 and 3 have their legends hidden with the filter function):
public static readonly mychart: chart.chartconfiguration = {
type: 'line',
data: {
datasets: [
{
label: 'a',
bordercolor: 'red',
fill: false,
linetension: 0
},
{
label: 'b',
bordercolor: 'blue',
fill: false,
linetension: 0,
pointradius: 0
},
{
bordercolor: 'blue',
borderdash: [5, 10],
borderwidth: 1,
fill: false,
linetension: 0,
pointradius: 0
},
{
bordercolor: 'blue',
borderdash: [5, 10],
borderwidth: 1,
fill: false,
linetension: 0,
pointradius: 0
}
]
},
options: {
legend: {
labels: {
filter: function(legenditem, chartdata) {
if (legenditem.datasetindex > 1) {
return false;
}
return true;
}
},
onclick: function(e, legenditem) {
const index = legenditem.datasetindex;
if (index === 1) {
const ci = this.chart;
[
ci.getdatasetmeta(1),
ci.getdatasetmeta(2),
ci.getdatasetmeta(3)
].foreach(function(meta) {
meta.hidden = meta.hidden === null ? !ci.data.datasets[1].hidden : null;
});
ci.update();
} else {
// do the original logic
chart.defaults.global.legend.onclick.call(this, e, legenditem);
}
}
},
responsive: false,
animation: {
duration: 0
},
}
...
};
score:1
my version is v2.8.0 i find a work way, try it.
add
legend : {
}
into option
var donutoptions = {
maintainaspectratio : false,
responsive : true,
animation: {
animatescale: true,
animaterotate: true
},
tooltips: {
intersect: false,
callbacks: {
label: function (tooltipitem, data) {
...
}
},
},
plugins: {
datalabels: {
...
},
},
},
legend : {
}
};
and use this
donutchart.chart.getdatasetmeta(0).data[index].hidden = true;
donutchart.update();
score:4
this is now available in charts.js
from the documentation http://www.chartjs.org/docs/#chart-configuration-legend-configuration
legend configuration
the legend configuration is passed into the options.legend namespace. the global options for the chart legend is defined in chart.defaults.global.legend.
onclick function(event, legenditem) {} a callback that is called when a 'click' event is registered on top of a label item
onhover function(event, legenditem) {} a callback that is called when a 'mousemove' event is registered on top of a label item
score:14
you can try this
create store for hidden datasets
window.chartname = new chart(...
window.chartname.store = new array();
then use this function to update chart, must be handled by click on legend item
function updatedataset(legendli, chart, label) {
var store = chart.store;
var exists = false;
for (var i = 0; i < store.length; i++) {
if (store[i][0] === label) {
exists = true;
chart.datasets.push(store.splice(i, 1)[0][1]);
legendli.fadeto("slow", 1);
}
}
if (!exists) {
for (var i = 0; i < chart.datasets.length; i++) {
if (chart.datasets[i].label === label) {
chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
legendli.fadeto("slow", 0.33);
}
}
}
chart.update();
}
don't forget updated legend template in chart options
legendtemplate : "<ul class=\"<%=name.tolowercase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updatedataset($(this), window.chartname, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokecolor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
shortly, i added this onclick handler for li component
<li class=\"legend-item\" onclick=\"updatedataset($(this), window.chartname , '<%=datasets[i].label%>')\"><
for example fiddle
Source: stackoverflow.com
Related Query
- Chart.js: hiding series by clicking on legend
- Chart js custom separate legend returns error when clicking legend
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- Chart.js - Increase spacing between legend and chart
- Pie Chart Legend - Chart.js
- Chartjs Bar Chart Legend
- chart js how to fill legend box with colour
- Chart JS - set start of week for x axis time series
- ChartJS bar chart with legend which corresponds to each bar
- Chart.js HTML custom legend issues with doughnut chart
- Highlight Line Series on legend hover
- Series Details Not Showing in Angular Chart with Charts.js
- React ChartJS 2 : Get data on clicking the chart
- Chart js: how can I align the legend and the title
- Increase padding between legend and chart with react-chartjs-2
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- Hiding legend in PrimeNG
- Chart.js Radar chart legend label font size doesn't work
- Using Chart.js - Creating Legend for Doughnut Chart
- Time series line chart is not displayed
- Time Series Line chart js in react not working
- Hiding the ticks on the x-axes clips the chart (Chart.JS)
- Angular chart how to show the legend data value by default along with legend name
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- Chart JS Legend Styling
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- Chart.js chart onclick disables legend onclick
- chartjs Adding percentages to Pie Chart Legend
- Chart Js update legend boxes of graph with graph line style
- ChartJS horizontal chart display legend on each bar
More Query from same tag
- How to get chart size (without labels) with chart.js?
- Chart.Js vers2 multiline to version 3
- Saving chart.js chart to a folder (Not download)
- Chartjs doughnut chart for conditional data
- How to retrieve the instance of a chart that is not global
- chart js legend template
- Display two datasets from an array using chart.js in node.js
- chartjs - How to use differente color if value is lower than previous value?
- Changing Fonts In Javascript's CanvasJS
- How to update data from ajax call (chart.js)
- vue-chartjs cannot display the labels and datasets
- Chart.js plot not aligned with xAxis labels
- Charts flickering
- Chart.js how to display multiple labels on multi bar stacked chart
- Add chart using chart.js in codeigniter
- Unable to change default values in chart.js
- Vertical Line chart with ChartJS
- Why are the chartjs tooltip labels always showing the first x-axis label?
- How to remove some points in chartjs
- ChartJS showing incorrect data on the X-Axes
- In ng 2 chart during the load an undefined legend gets created automatically ,Is there any way to remove it?
- Unable to ES6 import ChartJS plugin into Aurelia
- Chart js padding isn't working for data labels
- Unable to display point values without mouse hover
- Creating and Updating Graph in HTML and Javascript
- Chart.js Time series - x axis that change depending on timestamp
- Smallest values are invisible in ng2-charts bar charts
- Chart JS Custom tooltips with % and label for X and Y axles
- ChartJS - line graph, position tooltip
- How to display k as thousand for the values of chart.js - Javascript