Show value inside stacked bar chart.
See original GitHub issueI want to make stacked bar chart that shows difference in values for each bar e.g. there were some values and new values are either bigger or smaller and I want to show it as a green part stacked on what has been before and empty border showing decrese in value. Something like this. (numbers in the pic are random)
How do I place value in the green part of the chart but not the missing or blue?
Here’s what I have now.
var data = {
labels: ['Value1','Value2'],
datasets: [
{
backgroundColor: [
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 0,
data: [65, 59],
},
{
backgroundColor: [
'#24FF6E',
'#24FF6E'
],
borderWidth: 0,
data: [39, 0],
},
{
backgroundColor:[
'#FFFFFF',
'#FFFFFF'
],
hoverBackgroundColor: '#FFFFFF',
borderWidth: 2,
data: [0, 40]
}
]
};
var options ={
responsive: false,
scales: {
xAxes: [{
stacked: true,
display: false,
gridLines: {
display:false
}
}],
yAxes: [{
stacked: true,
categoryPercentage: 0.5,
gridLines: {
display:false
}
}]
},
legend:{
display:false
},
tooltips:{
enabled:false
}
}
var ctx = document.getElementById("bars");
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
And also, can I make the end of the bar rounded?
Issue Analytics
- State:
- Created 7 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
A Complete Guide to Stacked Bar Charts | Tutorial by Chartio
The stacked bar chart (aka stacked bar graph) extends the standard bar chart from looking at numeric values across one categorical variable to...
Read more >Add Total Values for Stacked Column and Stacked Bar Charts ...
This is the only video you need to learn how to add add totals to stacked bar charts and stacked column charts in...
Read more >show the value on the each color of stacked bar chart from a ...
so according to stacked bar above, I want to show 977 in the first bar the blue color, show 977 for the CI_Finance...
Read more >How to add total labels to stacked column chart in Excel?
But sometimes you need to have a floating total values displayed at the top of a stacked bar graph so that make the...
Read more >Showing data values on stacked bar chart in ggplot2 in R
To show the data into the Stacked bar chart you have to use another parameter called geom_text(). Syntax: geom_text(size, position = ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@IDN-Christian the new link. You can also give a try to the
chartjs-plugin-datalabels.The set of files on GitHub under https://github.com/chartjs/chartjs-plugin-datalabels does not work either
https://github.com/chartjs/chartjs-plugin-datalabels/issues/41
You sample files are seeking the main JS file to do the work of labelling, and not finding it
How are we supposed to use this?
Failed to load resource: net::ERR_FILE_NOT_FOUND chartjs-plugin-datalabels-master/dist/chartjs-plugin-datalabels.js
No such file exists anywhere in the project that I got either from Git Desktop or from downloading the zip file