score:2
to use the datalabels plugin you will need to register it also please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html) first because you are using v2 syntax for your tooltip for example which wont work.
to get the percentage in the tooltip you can use any of the callbacks (https://www.chartjs.org/docs/master/configuration/tooltip.html#tooltip-callbacks) see example below for datalabels and the footer callback to display the percentages:
var dnct1 = document.getelementbyid('doenut1');
var mychart1 = new chart(dnct1, {
type: 'doughnut',
data: {
labels: ["scotland and northern ireland", "north east england", "north west england", "north wales and west midlands", "east midlands and east anglia", "south wales and south west england", "south east england"],
datasets: [{
label: ["scotland and northern ireland", "north east england", "north west england", "north wales and west midlands", "east midlands and east anglia", "south wales and south west england", "south east england"],
data: ["510", "887", "720", "837", "993", "774", "977"],
borderwidth: 0,
hoveroffset: 5,
backgroundcolor: ['#f3ac16', '#9f9f9f', '#ff3355', '#55ee22', '#354d73', '#666633', '#553fcf'],
cutout: 0
}]
},
options: {
layout: {
padding: {
bottom: 25
}
},
plugins: {
tooltip: {
enabled: true,
callbacks: {
footer: (ttitem) => {
let sum = 0;
let dataarr = ttitem[0].dataset.data;
dataarr.map(data => {
sum += number(data);
});
let percentage = (ttitem[0].parsed * 100 / sum).tofixed(2) + '%';
return `percentage of data: ${percentage}`;
}
}
},
/** imported from a question linked above.
apparently works for chartjs v2 **/
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataarr = dnct1.chart.data.datasets[0].data;
dataarr.map(data => {
sum += number(data);
});
let percentage = (value * 100 / sum).tofixed(2) + '%';
return percentage;
},
color: '#ff3',
}
}
},
plugins: [chartdatalabels]
});
<body>
<canvas id="doenut1" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.4.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.js" ></script>
</body>
score:2
if you are using chartjs v3 then i got it to work without any additional plugins. i overrode the tooltip at the dataset level.
datasets: [{
label: 'industries',
data: [1, 5, 10, 14, 15],
tooltip: {
callbacks: {
label: function(context) {
let label = context.label;
let value = context.formattedvalue;
if (!label)
label = 'unknown'
let sum = 0;
let dataarr = context.chart.data.datasets[0].data;
dataarr.map(data => {
sum += number(data);
});
let percentage = (value * 100 / sum).tofixed(2) + '%';
return label + ": " + percentage;
}
}
}
}]
Source: stackoverflow.com
Related Query
- ChartJS version 3 how to add percentage to pie chart tooltip
- how to add percentage value to legend field in pie chart using chart.js
- ChartJS - How to add Text between Pie Chart and Legend
- Laravel - How to Display both count and percentage (%) in chartjs pie chart
- How to modify chartjs tooltip so i can add customized strings in tooltips
- ChartJS add tooltip to a grouped bar chart
- How to add ChartJS code in Html2Pdf to view image
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- Using chart js version 3, how to add custom data to external tooltip?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- how to add legend in pie chart
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- How to get labels on ChartJS Pie chart segments
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to make chartjs pie chart responsive
- How to group smaller Pie Chart slices together to Improve Readability in chartjs
- How add the sizes of the slices in the pie chart (at the top) in Chart.js?
- how to display name on multi series pie chart in chartjs
- How to add space to the bottom of the chart in chartjs [angular]
- ChartJS add custom tooltip to a stacked bar chart
- how to add Thousand separator in pie chart tooltips of charts.js
- ChartJS Pie Chart How default just show 2 legend datas
- How to display Tooltip without hovering pie chart with Chart.JS
- How to set Custom tooltip event with Chartjs version 2.X
- How to set up a simple pie chart using React in ChartJS on codesandbox
- chartjs - How to access chart instance in a custom tooltip callback
- ChartJs - Doughnut Chart - how to remove labels if percentage is less than a limit
More Query from same tag
- Why Chart.JS showing an extra line
- How to set the serifs on the X and Y axes?
- How to change font size, padding of chart title only, in chart.js 3.x
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- chart.js time scatter with true scale
- ChartJS react-chart-js2 Options not working
- How can I assign dynamic data from service via subscribe to doughnut chart in angular?
- How to Integrate Chart.Funnel.js in Chart.js
- Chart.js doughnut animate/draw clockwise
- chart.js Legends issue (not showing)
- Why Chart.js's tooltip appears in wrong position when mouse hover?
- Parsing an unnamed JSON array into React component
- How to get dataset from MySQL using Flask?
- ChartJS Recreate Chart
- ng2-chart with Angular 4: Can't bind to 'data' since it isn't a known property of 'canvas'
- Chartjs Doughnut Chart smooth animation in countdown
- Change value from 0 to something on tooltip only
- Chart JS version 3 not showing in pdf for engine wkhtmltopdf
- Chartjs v7.0 with plugin zoom, strange effect when use "drag" mode.
- How to make dashed thick lines with dots in ChartJS ? Is it possible?
- Chart.js: passing objects instead of int values as data
- How to change z-index of chart js tooltip?
- Chart.js removing first dataset and label
- ChartJS Zoom Granularity
- How to show xaxis lable o only data point and hide all others?
- Html canvas element resets width and height to zero after drag/drop
- Overlap horizontalBar graps using ChartJS
- How to show different product name for every bar in chart js
- chart js showing different width of bar
- Chart.js Customize tool tip to show more data