score:31
to reverse how legend label clicking behaves, you can use the legend onclick
option to implement the new click logic. here is an example below that will give you the desired behavior. note, in this implementation if you click an already hidden label, it will unhide it, and hide all the others.
function(e, legenditem) {
var index = legenditem.datasetindex;
var ci = this.chart;
var alreadyhidden = (ci.getdatasetmeta(index).hidden === null) ? false : ci.getdatasetmeta(index).hidden;
ci.data.datasets.foreach(function(e, i) {
var meta = ci.getdatasetmeta(i);
if (i !== index) {
if (!alreadyhidden) {
meta.hidden = meta.hidden === null ? !meta.hidden : null;
} else if (meta.hidden === null) {
meta.hidden = true;
}
} else if (i === index) {
meta.hidden = null;
}
});
ci.update();
};
here is a working example as well.
if however, you want a more complex logic that will unhide a label that is currently hidden when at least one other label is currently visible, then you can use the below implementation.
function(e, legenditem) {
var index = legenditem.datasetindex;
var ci = this.chart;
var alreadyhidden = (ci.getdatasetmeta(index).hidden === null) ? false : ci.getdatasetmeta(index).hidden;
var anyothersalreadyhidden = false;
var allothershidden = true;
// figure out the current state of the labels
ci.data.datasets.foreach(function(e, i) {
var meta = ci.getdatasetmeta(i);
if (i !== index) {
if (meta.hidden) {
anyothersalreadyhidden = true;
} else {
allothershidden = false;
}
}
});
// if the label we clicked is already hidden
// then we now want to unhide (with any others already unhidden)
if (alreadyhidden) {
ci.getdatasetmeta(index).hidden = null;
} else {
// otherwise, lets figure out how to toggle visibility based upon the current state
ci.data.datasets.foreach(function(e, i) {
var meta = ci.getdatasetmeta(i);
if (i !== index) {
// handles logic when we click on visible hidden label and there is currently at least
// one other label that is visible and at least one other label already hidden
// (we want to keep those already hidden still hidden)
if (anyothersalreadyhidden && !allothershidden) {
meta.hidden = true;
} else {
// toggle visibility
meta.hidden = meta.hidden === null ? !meta.hidden : null;
}
} else {
meta.hidden = null;
}
});
}
ci.update();
}
here is a working example for this alternate implementation as well.
to use this in your specific code, just place it in your chart's legend config using the onclick
property.
var config = {
type: 'radar',
data: chartata,
animationeasing: 'linear',
options: {
legend: {
fontsize: 10,
display: true,
itemwidth: 150,
position: 'bottom',
fullwidth: true,
labels: {
fontcolor: 'rgb(0,0,0)',
boxwidth: 10,
padding: 20
},
onclick: function(e, legenditem) {
var index = legenditem.datasetindex;
var ci = this.chart;
var alreadyhidden = (ci.getdatasetmeta(index).hidden === null) ? false : ci.getdatasetmeta(index).hidden;
ci.data.datasets.foreach(function(e, i) {
var meta = ci.getdatasetmeta(i);
if (i !== index) {
if (!alreadyhidden) {
meta.hidden = meta.hidden === null ? !meta.hidden : null;
} else if (meta.hidden === null) {
meta.hidden = true;
}
} else if (i === index) {
meta.hidden = null;
}
});
ci.update();
},
},
tooltips: {
enabled: true
},
scale: {
ticks: {
fontsize: 15,
beginatzero: true,
stepsize: 1,
max: 5
}
}
},
},
it was not clear what behavior you wanted the 'all' option to have, but you might be able to use the legend.labels.generatelabels
option to trick chart.js to add an 'all' label (you will have to modify the above onclick
logic to deal with that thought.
however, i think a better solution would be to implement your own link or button outside of the chart.js canvas that would show/hide all datasets. check out the chart.js radar sample page to see how they bind buttons with chart actions.
score:0
a shorter code with the legend.onclick
solution
// this.chart.options
legend: {
onclick: (_, item: legenditem) => {
if (!this.chart) {
return;
}
const currenthidden: boolean = this.chart.data.datasets[item.datasetindex].hidden ?? false;
if (currenthidden) {
this.chart.data.datasets.foreach(ds => {
ds.hidden = true;
});
this.chart.data.datasets[item.datasetindex].hidden = false;
} else {
this.chart.data.datasets.foreach(ds => {
ds.hidden = currenthidden == (ds.hidden ?? false);
});
this.chart.data.datasets[item.datasetindex].hidden = false;
}
this.chart?.update();
},
},
score:2
please try this code for pie chart for a single dataset to toggle the behavior of the pie chart of chart.js .
onclick:function(e, legenditem){
var index = legenditem.index;
var ci = this.chart;
var meta = ci.getdatasetmeta(0);
var currentalreadyhidden = (meta.data[index].hidden==null) ? false : (meta.data[index].hidden);
var allshown=true;
$.each(meta.data,function(ind0,val0){
if(meta.data[ind0].hidden){
allshown=false;
return false;
}else{
allshown=true;
}
});
if(allshown){
$.each(meta.data,function(ind,val){
if(meta.data[ind]._index===index){
meta.data[ind].hidden=false;
}else{
meta.data[ind].hidden=true;
}
});
}else{
if(currentalreadyhidden){
$.each(meta.data,function(ind,val){
if(meta.data[ind]._index===index){
meta.data[ind].hidden=false;
}else{
meta.data[ind].hidden=true;
}
});
}else{
$.each(meta.data,function(ind,val){
meta.data[ind].hidden=false;
});
}
}
ci.update();
}
Source: stackoverflow.com
Related Query
- Chart.js change legend toggle behaviour
- how to change point style legend to diamond in chart js
- VueJS + Chartjs - Chart only renders after code change
- ChartJS - Change legend to toggle buttons
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
- change legend in chart in report builder
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart.js - Increase spacing between legend and chart
- Pie Chart Legend - Chart.js
- Change legend position of ng-charts (using angular2)
- Chart Js change text label orientation on Ox axis
- chartjs datalabels change font and color of text displaying inside pie chart
- Chartjs Bar Chart Legend
- chart js how to fill legend box with colour
- Change Chartjs Legend Icon Style
- Chart js. How to change font styles for "labels" array?
- ChartJS bar chart with legend which corresponds to each bar
- How to change the color of legend in chartjs and be able to add one more legend?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Change Legend Box Outline Chart.js 2
- Chart.js HTML custom legend issues with doughnut chart
- Angular 2 chart - change point radius
- Change Radius/Point size of Legend Points in chart.js when usePointStyle is true
- Change labels colors for radar chart js
- Chart js: how can I align the legend and the title
- How to change color of hidden legend item instead of strike-through in Chart.js
- 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
- Change border color on legend in Chart.js
- Chart.js Radar chart legend label font size doesn't work
More Query from same tag
- Draw a mathematical function in chartjs
- Chart.js t.ticks.map is not a function
- Updating Chart.js with JSON, cannot read property 'length' of undefined
- In chartJS, change label color onhover
- How to change axis font in PrimeFaces and Chart.js
- Chart.js render in hidden Bootsrap tab
- Chart JS Line Graph multitooltipkey background color issue
- Put chart.js chart inside JQuery tooltip?
- Cannot call a function in Javascript - Chart.js
- diplay barchart in a <div>
- Chart JS Logarithmic x-axis
- Use chartjs with rails
- Chart.js number format
- how to make doughnut chart portions, buttons
- Adding images/icons to specific coordinates in chart.js
- Create grouped-bar using chart.js, php and mysql
- Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs
- Format chart.js x labels
- Is it possible to add image behind doughnut chart with transparency color in ng2chart?
- How do you insert a linear horizontal line in chart.js
- Chart.js lost its colors
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- Dynamically create Angular-Chart with data binding
- Highlight doughnut segment on mouseenter generateLegend Chartjs 2
- Chart.js Show labels on Pie chart
- Unable to install chartjs-node with npm, due to file cairo.h missing/Failed at the canvas@1.6.13 install script
- Hide x-Axis from angularjs-chartjs
- Chartjs bar-chart does not render when values are equal
- How to change number to $ with commas? Chart.js
- how to display large number of data points