score:2
Accepted answer
edit:
i noticed that if the chart was redrawn (e.g. if the browser window is resized) the legend would lose the extra text.
i've modified the approach to work as an inline plugin so that the label
object is modified before the legend is drawn.
let labels = ['a', 'b', 'c', 'd'],
series = [4, 2, 1, 3],
mychart = new chart(document.getelementbyid('chart'), {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: series,
backgroundcolor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
maintainaspectratio: false
},
plugins: [{
afterlayout: function(chart) {
let total = chart.data.datasets[0].data.reduce((a, b) => {
return a + b;
});
chart.legend.legenditems.foreach(
(label) => {
let value = chart.data.datasets[0].data[label.index];
label.text += ' - ' + (value / total * 100).tofixed(0) + '%'
return label;
}
)
}
}]
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="chart"></canvas>
score:1
chart.js 3.xx
i've included a sample for version 3.5 too.
you can alter the legend text by overriding the generatelabels
method.
let labels = ['a', 'b', 'c', 'd'],
series = [4, 2, 1, 3],
mychart = new chart(document.getelementbyid('chart'), {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: series,
backgroundcolor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
maintainaspectratio: false,
plugins: {
legend: {
display: true,
position: "bottom",
align: "center",
fontfamily: "arial",
labels: {
usepointstyle: true,
fontcolor: "red",
generatelabels(chart) {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
const {labels: {pointstyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getdatasetmeta(0);
const style = meta.controller.getstyle(i);
return {
text: 'this is ' + label + ' - ' + chart.data.datasets[0].data[i],
fillstyle: style.backgroundcolor,
strokestyle: style.bordercolor,
linewidth: style.borderwidth,
pointstyle: pointstyle,
hidden: !chart.getdatavisibility(i),
index: i
};
});
}
return [];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js how to modify an existing legend
- chart js how to fill legend box with colour
- Chart js: how can I align the legend and the title
- Angular chart how to show the legend data value by default along with legend name
- how can i modify scale labels in angular chart js?
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- Chart.js 3.7 version. How to modify legend label?
- How can i give the full Legend a background color in chart js?
- ChartJS Pie Chart How default just show 2 legend datas
- How to show/hide animation when legend clicked chart js
- How to print a chart rendered by code
- Modify the legend of a double doughnut with chart js
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to remove the Legend of chart from angular Chart.js
- how to change point style legend to diamond in chart js
- ChartJS - How to add Text between Pie Chart and Legend
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- How do I destroy/update Chart Data in this chart.js code example?
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- How can I add new data points to an existing chart with chart.js?
- How get values on legend label withn Chart js on Angular
- How can I add functionality to Chartjs Doughnut chart custom legend
- How to add legend on chart js annotation
- How to run Chart.js samples using source code
- how to modify horizontal bar chart using chart js
- How to add a coloured legend box to a pie chart with Chart.js v1?
- how to not repeat code while creating multiple charts in chart js
More Query from same tag
- Chart.js scale which increases by x (arbitary number) for each tick
- Send data from a form to another component of the same level -angular
- How to create two pie charts using Chart.js API?
- ChartJS with dates on the X axis not displaying any graph
- Chartjs sample line chart setup doesn't show dataLabels
- ChartJS Email HTTP Request API
- Using ChartJS to create a multiple grouped bar chart - see picture below
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- ChartJS adding 3yAxes
- How to reduce the number of data points displayed in react-chart-js2 (data decimation)
- Changing Dataset for a chart in angular 10
- Issues with react-chartjs-2
- problem with chart js pie chart dataset data
- How do I make many ChartJS charts on the same page to have the same height and also even column width?
- Can we have number value on the top of charts bars.?
- Dynamically create dataset objects for multi-line graphing, using pre-defined dataset object arrays (JavaScript / Chart.js)
- chart.js tooltip position, tooltip not displayed
- Remove Chart.js chart padding
- Chartjs + Vue.js - Cannot read property '_meta' of undefined
- ChartJS, Disable Tooltip for one plot on a multi graph data
- Chartjs: Multiple data values for the same label
- PHP render stacked area chart of JSON dataset
- Chart.js canvas and chart width gets overwritten when redrawn
- How to rotate to center of a dataset using Chart.js (Doughnut chart)
- AngularJs ChartJs tooltip z-index issue
- Hiding spaces with zero values in bar chart with chart.js
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- Label is too long in Doughnut Chart
- Chart.js ignoring canvas height & width
- Chart.js: colouring tooltip labels