chart.js stacked graph that overlaps

javascript chart.js chart.js2
Mat picture Mat · Jun 15, 2018 · Viewed 8.9k times · Source

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?

Answer

wahwahwah picture wahwahwah · Jun 15, 2018

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

Related questions

Chart.js 2.0 doughnut tooltip percentages

I have worked with chart.js 1.0 and had my doughnut chart tooltips displaying percentages based on data divided by dataset, but I'm unable to replicate this with chart 2.0. I have searched high and low and have not found a working …

Read More
using array values in chart.js data and label field

I wish to pass values of an array to the data and label fields of the chart.js dataset. Here the code from success of ajax call made to fetch json data. I fetch the json data and store it …

Read More
How to add OnClick Event on labels in Chart.js v2.0?

Looking For a method to add onClick handle on the "label" element in chartjs 2.0 As using below method will return "undifined" in console.log whenever clicking on any one of the label attributes in Char.js V2.0 RadarChart. var data = { // …

Read More