admin管理员组文章数量:1323225
I am using Chart.js along with a Chart.js plugin, chart-labels. I am wanting to show the labels at the top of the bar chart, and in the label show the percentage of the x value in relation to the y value (e.g., 16 is 94% of 17), but the label values are always 100% (which it seems like it is calculating 16y by 16x = 100).
I haven't found a way to do this without the plugin, so I'm not sure if the plugin is the issue or not, or if the chart configuration is wrong.
Any advice/help is appreciated! Here is a JSBin with the code: ,js,output
HTML and JS:
<div style="width: 100%;"><canvas id="myChart"></canvas></div>
var colors = '#cd1127';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Asset Taxes", "Excluded Assets", "Personal Injury and Property Damage", "Offsite Disposal", "Royalties", "Litigation", "Employment", "Operating Expenses"],
datasets: [{
data: [16, 14, 17, 13, 15, 12, 9, 11],
backgroundColor: '#cd1127',
borderColor: '#cd1127',
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 18,
beginAtZero:true
}
}]
},
plugins: {
labels: {
render: 'percentage',
showActualPercentages: true
}
}
}
});
Here's a screenshot illustrating what I'm going for:
I am using Chart.js along with a Chart.js plugin, chart-labels. I am wanting to show the labels at the top of the bar chart, and in the label show the percentage of the x value in relation to the y value (e.g., 16 is 94% of 17), but the label values are always 100% (which it seems like it is calculating 16y by 16x = 100).
I haven't found a way to do this without the plugin, so I'm not sure if the plugin is the issue or not, or if the chart configuration is wrong.
Any advice/help is appreciated! Here is a JSBin with the code: https://jsbin./dawenetuya/edit?html,js,output
HTML and JS:
<div style="width: 100%;"><canvas id="myChart"></canvas></div>
var colors = '#cd1127';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Asset Taxes", "Excluded Assets", "Personal Injury and Property Damage", "Offsite Disposal", "Royalties", "Litigation", "Employment", "Operating Expenses"],
datasets: [{
data: [16, 14, 17, 13, 15, 12, 9, 11],
backgroundColor: '#cd1127',
borderColor: '#cd1127',
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 18,
beginAtZero:true
}
}]
},
plugins: {
labels: {
render: 'percentage',
showActualPercentages: true
}
}
}
});
Here's a screenshot illustrating what I'm going for:
Share Improve this question edited Feb 28, 2019 at 20:50 Joyrex asked Feb 28, 2019 at 0:11 JoyrexJoyrex 1,10314 silver badges24 bronze badges 3- The JSBin is not working, could you please correct it so that we see your current progress? – adelriosantiago Commented Feb 28, 2019 at 0:23
- I just checked the JSBin and it is working - I added an annotated screenshot to the main question to help illustrate what I'm going for. – Joyrex Commented Feb 28, 2019 at 16:38
- I checked JSBin again, and you're right - I hadn't saved the final changes to it. It's now fixed. Sorry! – Joyrex Commented Feb 28, 2019 at 20:50
2 Answers
Reset to default 4You can create your own render function like this:
...
render: function (args) {
let max = 17; //This is the default 100% that will be used if no Max value is found
try {
//Try to get the actual 100% and overwrite the old max value
max = Object.values(args.dataset.data).map((num) => {
return +num; //Convert num to integer
});
max = Math.max.apply(null, max);
} catch (e) {}
return Math.round(args.value * 100 / max);
}
...
Here is the example code: https://jsbin./hihexutuyu/1/edit
You can actually erase the try/catch
block and define only max
value and it will work. It would look like this:
...
render: function (args) {
let max = 17; //Custom maximum value
return Math.round(args.value * 100 / max);
}
...
The try/catch
block is only to automatically get the maximum value from the dataset.
The plugin documentation, with all other possible settings that can be added to render
is here: https://github./emn178/chartjs-plugin-labels.
I'm not sure I have a plete grasp of what you're trying to achieve, but you could use a callback function to generate the desired result along the yAxes, similar to this:
yAxes:[{
ticks:{
callback:function(value,index,values){
return ((value / index) * 100)+'% ';
}
}
}]
版权声明:本文标题:javascript - Chart.js - How To Show Value of Label as Percent of X and Y Values - Currently Always 100% - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742070454a2419091.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论