question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Show value inside stacked bar chart.

See original GitHub issue

I 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) default 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:closed
  • Created 7 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
simonbrunelcommented, Sep 18, 2017

@IDN-Christian the new link. You can also give a try to the chartjs-plugin-datalabels.

0reactions
BarbiBimbocommented, Mar 15, 2018

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found