score:3
Accepted answer
you can see this code working on this jsfiddle and here is its result :
your idea is actually quite good, but as you declared in your question, it won't be dynamic and then won't work with every chart of this type.
a way to make it dynamic is to use chart.js plugins where the beforeinit
event will be handled to edit the data to fit your percentage problem, and where the afterdraw
event will be handled to write the percentage over the bar :
chart.pluginservice.register({
// this event helps to edit the data in our datasets to fit a percentage scale
beforeinit: function(chartinstance) {
// we first get the total of datasets for every data
var totals = [];
chartinstance.data.datasets.foreach(function(dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var total = 0;
chartinstance.data.datasets.foreach(function(dataset) {
total += dataset.data[i];
});
totals.push(total);
}
});
// and use it to calculate the percentage of the current data
chartinstance.data.datasets.foreach(function(dataset) {
for (var i = 0; i < dataset.data.length; i++) {
// this ----------¬ is useful to add it as a string in the dataset
// it solves v the problem of values with `.0` at decimals
dataset.data[i] = '' + (dataset.data[i] / totals[i]) * 100;
}
});
},
// this event allows us to add the percentage on the bar
afterdraw: function(chartinstance) {
// we get the canvas context
var ctx = chartinstance.chart.ctx;
// and set the properties we need
ctx.font = chart.helpers.fontstring(14, 'bold', chart.defaults.global.defaultfontfamily);
ctx.textalign = 'center';
ctx.textbaseline = 'bottom';
ctx.fillstyle = '#666';
// for every dataset ...
chartinstance.data.datasets.foreach(function(dataset) {
// if it is not the first dataset, we return now (no action)
if (dataset._meta[0].controller.index != 0) return;
// for ervery data in the dataset ...
for (var i = 0; i < dataset.data.length; i++) {
// we get the model of the data
var model = dataset._meta[object.keys(dataset._meta)[0]].data[i]._model;
// and use it to display the text where we want
ctx.filltext(parsefloat(dataset.data[i]).tofixed(2) + "%", ((model.base + model.x) / 2), (model.y + model.height / 3));
}
});
}
});
you can see this code working on this jsfiddle and here is its result :
Source: stackoverflow.com
Related Query
- How can I create a stacked bar chart with Charts.JS that displays relative rather than absolute values?
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- How do I create a stacked horizontal bar chart with Chart.js in React?
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- How can I create a bar chart that has multiple yAxes scales?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How to create stacked bar chart using react-chartjs-2?
- How to display inline values in a stacked bar chart with Chart.js?
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- How do I create stacked chart with Chart.js version 2.0.0-beta
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- Create stacked bar chart with a single dataset per stack
- Unable to create Stacked Grouped Bar Chart with chart.js / react-chartjs-2 in React
- how to create a bar chart with php data variables
- How to create Stacked bar chart from JSON in chart.js
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- how to create bar chart with group and sam color for each group using chart.js?
- How can I create a long tail chart with chart.js
- Horizontal stacked bar chart with chart.js
- Vertical stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Stacked horizontal bar chart along total count with chart.js
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to create dynamic charts with Django and Chart.js?
- How can I datalabels and Sum display in the same time on a stacked bar
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to create chartjs chart with data from database C#
- Stacked bar chart with rounded corner of bar using Chart.js
- How to Create Chart.JS Bar Graph with Min, Max & Average
More Query from same tag
- Chart.js: change title/legend positon to right
- In ChartJS is it possible to change the line style between different points?
- how to send multiple data in chartjs label
- Chart.js Legend Customization
- Horizontal floating bars with a time y-axis in Chart.js
- I want to hide the label in a tooltip because it shows undefined
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Chart.js - Draw bar chart with multiple labels
- Chart.js not displaying in box
- How to convert a bar legend to line legend in chart.js 2.7.2?
- How to set equal width between ticks - chartjs
- How to show the data labels without hovering the mouse on the bubbles
- How do you output the correct value for Chart.js Radar graph on label?
- Formatting Data With Charts.JS
- Stack two y axes using chart.js
- How to change states for making dynamic pie chart?
- How to connect Firebase in Chart.js?
- How to change chartjs ticks orientation to 'slope right'?
- How to show scale labels and set min/max for yAxes?
- Count the duplicates in a string array using React JS
- Pie Chart Label is not visible in ReactJS
- Don't show label tooltip in Chart.js if hover is less than 1 second
- Chart.js Pie Chart
- Using Chart.js with Pyramid Web Framework
- Chartjs / ng2-charts line on hover does not work
- Chart.js - Mixed Chart: Bar Graph with Diagonal Line
- How to disable Chart.js Radar Chart point labels
- How to use chartjs-plugin-trendline with react-chartjs-2
- using data structures in chartjs
- Chartjs - Doughnut chart with multi layer and running value