CODEWITHSUNDEEP
javascriptchart.jschart.js2
Mat
Mat

Reputation: 87

chart.js stacked graph that overlaps

I am creating a stacked bar graph but I need it to not just add the two vales together and display it.

For example: stackgraph

This graph is supposed to display the "goal" percentage, and actual percentage. So if the column has a goal value of 70 and a actual value of 30 it will show the color of the actual number from 0-30 then continue the goal color from 30-70.

Is there anyway to actually have them overlap like that and not just total to 100?

Upvotes: 17

Views: 20145

Answers (3)

wahwahwah
wahwahwah

Reputation: 3177

You have to add these parameters to your code - enable stacking for X and disable it for Y axis:

  xAxes: [{ stacked: true }],
  yAxes: [{
    stacked: false,
    ticks: {
      beginAtZero: true,
    },
  }]

Upvotes: 27

HipsterSantos
HipsterSantos

Reputation: 1

scales: {
  xAxes: [{
      stacked: true
  }],
  yAxes: [{
      stacked: false,
      ticks:{
          suggestedMax:50,
          suggestedMin:1,
          beginAtZero:true,
          max:100,
          autoSkip:true,
          lineHeight:2
      }
  }]
}

Upvotes: 0

Mat
Mat

Reputation: 87

Nevermind, I found the answer. 

options: {
              scales: {
                xAxes: [{ stacked: true }],
                yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                        stacked: false
                }]
              }
            }

You just need to set the xAxes stacked to true and yAxes to false

Upvotes: 13

Related Questions