Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 220
Mat Avatar asked Jun 15 '18 19:06

Mat


People also ask

How do you create an overlapping chart?

Overlapping Chart In ExcelStep 1: Select the cell containing the data. Step 2: Select the 'Insert' Tab from the top and select the bar chart. Step 3: Right-click on one bar and choose the “Change series chart type” option. Step 4: In the change chart dialog box, make sure the Combo category is selected.

How do I stack graphs on top of each other in Excel?

Most versions of Excel: Click on Chart. Click Insert, then click Stacked Area. Mac Excel 2011: Click on Chart, then Stacked Area.

Can bar graphs overlap?

To sum up, you might use a clustered bar graph when you want to make direct comparisons across parts of a whole. On the other hand, overlapped bar graphs enable to do excellent comparisons between two closely related numerical variables.


1 Answers

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,
    },
  }]
like image 103
wahwahwah Avatar answered Oct 08 '22 18:10

wahwahwah