score:1
even i researched a lot, couldn't find anything for this kind of behavior in chartjs library, so come up with a hack.
hack is something like, do not let chart js to draw legends, instead we just get the html of legends from chart js library, and put it in our container. by doing this we have full access of legends and we can do whatever we want.
https://jsfiddle.net/1kxenzpr/
const data = [70, 30, 0];
debugger;
var ctx = document.getelementbyid("mychart").getcontext('2d');
var chart = new chart(ctx, {
type: 'pie',
data: {
labels: ["green", "blue", "gray", "purple", "yellow", "red", "black"],
datasets: [{
backgroundcolor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: data
}]
},
options: {
legend: {
display: false
},
}
});
var mylegendcontainer = document.getelementbyid("legend");
mylegendcontainer.innerhtml = chart.generatelegend();
var legenditems = mylegendcontainer.getelementsbytagname('li');
for (var i = 0; i < legenditems.length; i++) {
legenditems[i].queryselectorall('span')[0].innerhtml = data[i] + '%'
}
.container {
width: 80%;
margin: 15px auto;
}
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: inline-block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
text-decoration: line-through;
}
[class$="-legend"] li span {
display: inline-block;
margin-right: 10px;
width: 50px;
font-size: 12px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<div class="container">
<div>
<canvas id="mychart"></canvas>
<div id="legend"></div>
</div>
</div>
score:1
no way (by setting x or y). you should use legendcallback
:
https://www.chartjs.org/docs/latest/configuration/legend.html#html-legends
in general, your q does not follow stackoverflow guidelines (this is more a mission, not q). https://stackoverflow.com/help/how-to-ask
anyway, this is +- the idea (convert to % by basic js). to take this step forward you should generate full generate html legend (to put a number inside a color div). related: custom legend with chartjs v2.0
var mydata = [4, 9, 5];
var data = {
labels: ["africa", "asia", "europe"],
datasets: [{
label: "population (millions)",
backgroundcolor: ["#3e95cd", "#8e5ea2","#3cba9f"],
data: mydata
}]
};
/* get total */
const reducer = (accumulator, currentvalue) => accumulator + currentvalue;
var total = mydata.reduce(reducer);
var options = {
responsive: true,
title: {
text: 'show % calucate on fly',
position: 'top',
display: true
},
legend: {
display: true,
labels: {
/* generatelabels */
generatelabels(chart) {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
/* inner loop throw lables */
return data.labels.map((label, i) => {
var backgroundcolor = data.datasets[0].backgroundcolor[i];
var current = data.datasets[0].data[i];
var percentage = ((current * 100) / total).tofixed(2) + '%';
return {
text: label + " | " + percentage,
fillstyle: backgroundcolor,
// extra data used for toggling the correct item
index: i
};
});
}
return [];
}
},
},
scales: {
xaxes: [{
display: true
}],
yaxes: [{
display: true
}]
}
};
new chart(document.getelementbyid("chart"), {
type: 'pie',
data: data,
options: options
});
<canvas id="chart" width="800" height="450"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
Source: stackoverflow.com
Related Query
- Add percentage to label badge - doughnut chart.js
- How to add text inside the doughnut chart using Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Add a custom label to the top or bottom of a stacked bar chart
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How to add label in chart.js for polar chart area
- How to add title inside doughnut chart in Angular Chart?
- ChartJS version 3 how to add percentage to pie chart tooltip
- Add Text to Doughnut Chart - ChartJS
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- Add HTML to label of bar chart - chart js
- how to add percentage value to legend field in pie chart using chart.js
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- Chart.js Doughnut chart inner label different than outer
- hide label on doughnut chart of chartjs
- Label issue in doughnut chart using chartjs
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- Add new line in es6 inside a doughnut chart
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- How to add image inside the doughnut chart using chart.js?
- I want to add label on only specific vue chart
- Adding label inside multiseries doughnut chart through chart.js
- ChartJs - Doughnut Chart - how to remove labels if percentage is less than a limit
- Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?
- getting additional value fields from data source for dx.chartjs doughnut chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart.js v3.60 - Add % symbol to the end of the tooltip label on a doughnut chart?
- How to add space between datasets in ng2 doughnut chart
More Query from same tag
- Unable to draw a scatter chart with vue-charts
- Modify the labels in chart.js when I update the chart
- Chart js - set width to a specific bar
- Ability to rotate y axis title in chart.js
- How to prevent empty bars from taking up width in Chart.js bar chart
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js - x-axis and tooltip label shows "undefined" in Chrome when browser language is NOT English
- Looping through afterDraw in ChartJS
- How to define the Charts in the script?
- ChartJs in endless loop
- How to set ticks on axes dynamically with chart.js?
- Dynamic Chart in PHP using Chart js
- How to hide other section of chartjs on click of lengend
- Need to update tool tip value based on drop down filter after ajax call
- How do I increase the arrow length on the pie chart in Charts.js?
- Accordion won't take up height of chart for first click
- How to pass data in Laravel with Chart.js
- Converting JSON data into Chart.js array from strings
- null values for instead of date causes the browser to crash while using chart js
- Prevent the wiping of an Array after routing Angular.js
- Chartjs with zoom plugin zooms too much with wheel just with single turn
- How to create spacing between Charts and Legends in Chart.js
- How to rotate a linear graphic in chart.js?
- ChartJS: Custom tooltip always displaying
- My ChartJS Line needs to click the color legend first before it plots the data
- Primevue Chart not rendered
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- chart.js v2 - how to 'fill' the graph when using time scale
- Avoid the first GridLine to be dashed on Chart JS
- chart looking strange on phone´s browser using chart.js