chart.js stacked graph that overlaps

Question

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?

Flyboat

Something like this? – Eadmund

Answer 1

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,
    },
  }]

Eadmund

Below answer is more complete and shows where to paste the code – Urgency

Hey Tom, did you review the edits? Also, I explain why this works. So, complete if you're copying and pasting. – Eadmund

Answer 2

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

Flyboat

If you arrived at this answer from the comment I posted, please accept my answer. – Eadmund

I didn't but since you got to it first i accepted it – Flyboat

I prefer this answer to wahwahwah's for completeness. It's way more obvious where to paste the code from the accepted answer. I also tried it without ticks and it seemed to work the same. – Radiocarbon

Answer 3

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

Impersonate

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Ashtray

Is there any chance to make charts draw the biggest value first. Otherwise you will not have some bars visible – Masha