score:54
you need to edit the generatelabels
property in your options :
options: {
legend: {
labels: {
generatelabels: function(chart) {
// here
}
}
}
}
since it is quite a mess to create on your own a great template. i suggest using the same function as in the source code and then edit what is needed.
here are a small jsfiddle, where you can see how it works (edited lines - from 38 - are commented), and its result :
score:0
i wanted to let the user select from 100+ data sets, but rather than adding/removing them from my chart i decided to set the showline: false
on any dataset that i want hidden. unfortunately the default legend would show all 100+. so in my solution i generate the legend manually, filtering out any dataset that has showline: false
.
your settings will have this:
legend: {
labels: {
generatelabels: (a) => {
return a.data.labels
}
}
and you'll generate your own labels with a helper function:
function updatealllabels() {
const mynewlabels = [];
mychart.data.datasets.foreach((element) => {
if (element.showline) {
mynewlabels.push(generatelabel(element));
}
});
mychart.data.labels = mynewlabels;
}
and you'll generate the label with another function:
function generatelabel(data) {
return {
fillstyle: data.bordercolor,
linewidth: 1,
strokestyle: data.bordercolor,
text: data.countyname, // i attach countryname to my datasets for convenience
}
}
now just don't forget to call the function whenever updating your chart:
updatealllabels();
mychart.update();
happy graphing!
score:1
following on from tektiv's answer, i've modified it for es6 which my linter requires;
options: {
legend: {
labels: {
generatelabels: (chart) => {
const { data } = chart;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const meta = chart.getdatasetmeta(0);
const ds = data.datasets[0];
const arc = meta.data[i];
const custom = (arc && arc.custom) || {};
const { getvalueatindexordefault } = chart.helpers;
const arcopts = chart.options.elements.arc;
const fill = custom.backgroundcolor ? custom.backgroundcolor : getvalueatindexordefault(ds.backgroundcolor, i, arcopts.backgroundcolor);
const stroke = custom.bordercolor ? custom.bordercolor : getvalueatindexordefault(ds.bordercolor, i, arcopts.bordercolor);
const bw = custom.borderwidth ? custom.borderwidth : getvalueatindexordefault(ds.borderwidth, i, arcopts.borderwidth);
const value = chart.config.data.datasets[arc._datasetindex].data[arc._index];
return {
text: `${label}: ${value}`,
fillstyle: fill,
strokestyle: stroke,
linewidth: bw,
hidden: number.isnan(ds.data[i]) || meta.data[i].hidden,
index: i,
};
});
}
return [];
},
},
},
},
score:5
maybe this is a hacky solution, but for me seems simpler.
the filter
parameter
chartjs legend options have a filter
parameter. this is a function that is called for each legend item, and that returns true/false whether you want to show this item in the legend or not.
filter
has 2 arguments:
legenditem
: the legend item to show/omit. its properties are described heredata
: the data object passed to the chart.
the hack
since js passes objects by reference, and filter
is called for each legend item, then you can mutate the legenditem
object to show the text that you want.
legend : {
labels: {
filter: (legenditem, data) => {
// first, retrieve the data corresponding to that label
const label = legenditem.text
const labelindex = _.findindex(data.labels, (labelname) => labelname === label) // i'm using lodash here
const qtd = data.datasets[0].data[labelindex]
// second, mutate the legenditem to include the new text
legenditem.text = `${legenditem.text} : ${qtd}`
// third, the filter method expects a bool, so return true to show the modified legenditem in the legend
return true
}
}
}
Source: stackoverflow.com
Related Query
- Pie Chart Legend - Chart.js
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- chartjs Adding percentages to Pie Chart Legend
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
- Chart.js - Pie chart calculate sum of visible values after legend click
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- Legend color not working with randomly generated background colors in chartjs pie chart
- ChartJS Pie Chart How default just show 2 legend datas
- chart.js legend not working for pie chart
- Pie chart legend styling using Chart js
- ChartJS - How to add Text between Pie Chart and Legend
- Chart js nested pie label colors in legend
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- React-chart does not render the legend for PIE chart
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
- Can we remove bar chart line on click on pie chart legend label?
- Legend option destroys pie chart in Chart.js
- Customize Pie Chart Legend in chart.js
- How to add a coloured legend box to a pie chart with Chart.js v1?
- Chart.js Show labels on Pie chart
- Chart.js - Increase spacing between legend and chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- chart.js: Show labels outside pie chart
- How set color family to pie chart in chart.js
- 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
- Chart.js v2.6: Add arrows to pie chart output values
More Query from same tag
- Am I using chart.update() correctly when trying to update the chart?
- Calling external Chartjs chart from a javascript file into HTML in Flask
- Cannot change the color of column chart according to its value
- Chart.js - make barchart element blink
- Chart.js do not display in Boostrap tabpanel
- Changing borderDash for specific gridLines in radar chart
- Chart.js donut chart remains grey - no color
- chart js when hover shows old values
- How to line break a label object in ChartsJS (nested arrays won't work)
- Problem with changing string to date with time
- Plot time on Y axis
- Chart.js not showing value on top of bars
- Bar chart with vertical lines in each bar
- Showing labels on bubble chart in angular-charts
- How do I incorporate Luxon timezone options with chart.js?
- Unable to set width and height on canvas in chart js
- How to set max ticks count in chart.js 3.*.*
- How to show different tooltips on charts (in columns)?
- Chart.js how to rewrite x for webAPP
- Chart x axis displays in timestamp instead of dates Chart.js
- Chartjs populate data with Axios response
- chart.js dynamically adjust gap between vertical bars
- Chart JS tooltips diffrent colors for label
- Responsive Chart.js Doughnut Chart with minimum height
- Is it possible to show each legends aligned with each bar in chart.js
- Chart.js - Mixed Chart: Bar Graph with Diagonal Line
- How can I keep my menu from moving other elements in the page?
- Vue3 Chart.js not rendering
- Grouped bar charts with intersecting ticks
- chartjs-plugin-dragdata isn''t working with scatter charts