score:9
chart.js v2 has a completely different api than earlier versions. you should read the new documentation carefully before upgrading (and then having to wonder what wen't wrong).
the fundamental changes (related to your question) are:
legendtemplate
andsegments
are not available anymore. you should instead uselegendcallback
(inoptions
) to override the default legend implementation. here's what the documentation says about this callback:
function to generate a legend. receives the chart object to generate a legend from. default implementation returns an html string.
- the data you used from
segments
are available in thechart
parameter (i.e. your actual chart object) of yourlegendcallback
function here:chart.data.datasets[0].data
. - now that we know where to get our required data from, we can loop through
chart.data.datasets[0].data
to collect the values and append them to the legend html string. - then we can simply call
mypiechart.generatelegend()
, which will invoke ourlegendcallback
.
complete example:
var mypiechart = new chart(ctx, {
type: 'pie',
data: d,
options: {
responsive: true,
maintainaspectratio: false,
tooltips: {
callbacks: {
label: function (tooltipitem, data) {
return data.labels[tooltipitem.index] + ' (' + data.datasets[tooltipitem.datasetindex].data[tooltipitem.index] + '%)';
}
}
},
legendcallback: function (chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var data = chart.data;
var datasets = data.datasets;
var labels = data.labels;
if (datasets.length) {
for (var i = 0; i < datasets[0].data.length; ++i) {
text.push('<li><span style="background-color:' + datasets[0].backgroundcolor[i] + '"></span>');
if (labels[i]) {
text.push(labels[i] + ' (' + datasets[0].data[i] + '%)');
}
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
},
legend: {
// since you're providing your own legend
display: false,
},
}
});
var legend = mypiechart.generatelegend();
document.getelementbyid("legend").innerhtml = legend;
for purposes of completeness, i've also added the same text (percentage%)
template on the tooltips labels (which similarly to legends, provide their own callbacks for overriding default implementations).
i would also suggest browsing through the actual chart.js source code, in particular having a look at legendcallback
, generatelegend()
, etc, to gain a better understanding of how things work under the hood.
Source: stackoverflow.com
Related Query
- return percentage in chart.js (v2+) legend
- how to add percentage value to legend field in pie chart using chart.js
- 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
- How to show percentage (%) in chart js
- ChartJS bar chart with legend which corresponds to each bar
- Chart.js HTML custom legend issues with doughnut chart
- Showing Percentage and Total In stacked Bar Chart of chart.js
- 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
- Chart.js Radar chart legend label font size doesn't work
- Using Chart.js - Creating Legend for Doughnut Chart
- Angular chart how to show the legend data value by default along with legend name
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- Include Percentage In Legend
- ChartJS version 3 how to add percentage to pie chart tooltip
- 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
- React chartjs-2 - Increase spacing between legend and chart
- how to add legend in pie chart
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Removing legend from chart.js Radar chart
More Query from same tag
- Showing a duration of time within a Chart.js chart
- Chart.js max legend height
- Line chart with combination of fill and line
- How to embed chart.js in angular-seed
- ChartJS: Limit Y Axis to cut outlimit values
- Not able to change chart.js x and y font colors
- Formatting axis labels using ChartsJS
- How to remove a vertical line from the canvas of react-chartjs-2?
- Change label color on pie-chart of ng2-charts/charts.js
- Refresh chart.config.data
- Displaying mixed types of legends (bar and lines) with Chartjs
- chart.js remove on hover effect
- Building a 24h visualisation with chartjs
- How do I recursively aggregate values inside of a loop of JavaScript objects?
- Plotting JSON data onto a chart using Chart.js
- Why are the chartjs tooltip labels always showing the first x-axis label?
- charts.js won't show legend and on chart descriptions
- Chart.js chart flickering when re-opening page
- ChartJs bar chart - keep bars left instead of equally spread across the width
- How to use chart.js for financial with dynamic CSV data?
- Add DataSet Bar Chart - Chart.JS
- How to draw a chart with Chart.JS?
- Chart.js How to get min-max values of X axis?
- Chart.js don't show the first time
- Mobile page loading in "zoomed" state
- How can I sort, insert in between and update full dataset in chartjs?
- Drawing a horizontal line on a stacked bar chart on hover (chart js)
- Chart.js repeating colors?
- Have text displayed instead of numerical values on y axis
- How to convert Json to Array In javascript for chart.js