17

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?

1

3 Answers 3

26

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,
    },
  }]
2
  • 1
    Below answer is more complete and shows where to paste the code
    – Tom
    Aug 29, 2022 at 12:49
  • 1
    Hey Tom, did you review the edits? Also, I explain why this works. So, complete if you're copying and pasting.
    – wahwahwah
    Sep 1, 2022 at 14:10
12

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

3
  • 3
    If you arrived at this answer from the comment I posted, please accept my answer.
    – wahwahwah
    Jun 15, 2018 at 20:10
  • I didn't but since you got to it first i accepted it
    – Mat
    Jun 15, 2018 at 20:19
  • 1
    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.
    – s3c
    Nov 23, 2021 at 15:09
0
scales: {
  xAxes: [{
      stacked: true
  }],
  yAxes: [{
      stacked: false,
      ticks:{
          suggestedMax:50,
          suggestedMin:1,
          beginAtZero:true,
          max:100,
          autoSkip:true,
          lineHeight:2
      }
  }]
}
2
  • 4
    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. Jun 30, 2021 at 8:26
  • Is there any chance to make charts draw the biggest value first. Otherwise you will not have some bars visible
    – Thallius
    Mar 10 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.