Turn StackedBarChart into horizontal bar chart

[Anschke]

Hi,

I'd love to show some data in a stacked bar chart with horizontal bars. As far as i got it from the documentation, it should be possible to set the indexAxis variable to IndexAxis.Y to achieve a horizontal representation.

Unfortunately I can't find a way to set it - neither in the general chart options nor in the StackedBarDataset.

I would greatly appreciate any help.

Thank you very much!

[stockiNail]

@Anschke the StackedBarChart and Dataset are supporting only vertical orientation. I think it could be new feature for next versions.

Anyway, in the meantime, you can use HorizontalBarChart (instead of StackedBarChart) and set the axes as stacked. Here is the sample:

HorizontalBarChart chart = new HorizontalBarChart();
//
// options
//
chart.getOptions().setResponsive(true);
chart.getOptions().getLegend().setPosition(Position.RIGHT);
chart.getOptions().getTitle().setDisplay(true);
chart.getOptions().getTitle().setText("Horizontal bar chart");
//
// FIRST dataset
//
HorizontalBarDataset dataset1 = chart.newDataset();
dataset1.setLabel("dataset 1");
IsColor color1 = GoogleChartColor.values()[0];
dataset1.setBackgroundColor(color1.alpha(0.2));
dataset1.setBorderColor(color1.toHex());
dataset1.setBorderWidth(1);
dataset1.setData(getRandomDigits(months));
//
// SECOND dataset
//
HorizontalBarDataset dataset2 = new HorizontalBarDataset();
dataset2.setLabel("dataset 2");
IsColor color2 = GoogleChartColor.values()[1];
dataset2.setBackgroundColor(color2.alpha(0.2));
dataset2.setBorderColor(color2.toHex());
dataset2.setBorderWidth(1);
dataset2.setData(getRandomDigits(months));
//
// AXES     
// AXIS Y
//
CartesianCategoryAxis yAxis = new CartesianCategoryAxis(chart, AxisKind.Y);
yAxis.setDisplay(true);
yAxis.setStacked(true); // MANDATORY to set to true to have stacked datasets
//
// AXIS X
//
CartesianLinearAxis xAxis = new CartesianLinearAxis(chart, AxisKind.X);
xAxis.setDisplay(true);
xAxis.setStacked(true); // MANDATORY to set to true to have stacked datasets

chart.getOptions().getScales().setAxes(xAxis, yAxis);
chart.getData().setLabels(getLabels());
chart.getData().setDatasets(dataset1, dataset2);

Result:

[stockiNail]

@Anschke FYI I have already committed https://github.com/pepstock-org/Charba/commit/d9e64e23d52c264db1b0d67c9ab5036d1177edca the feature to set index axis to stacked charts. Nevertheless I have seen some improvements to implement on the axes. It will be available new version.

[stockiNail]

I have implemented https://github.com/pepstock-org/Charba/commit/0034ad976de3e1e22652599c8eb2133917c19fd5 a specific chart for stacked horizontal bar.

[Anschke]

That was by far the quickest answer I ever received on a GitHub Issue - let alone the most quickest feature built and commited. I'm super impressed, thank you very much!

You should defo add an option to donate somewhere 🍰

[stockiNail]

That was by far the quickest answer I ever received on a GitHub Issue - let alone the most quickest feature built and commited. I'm super impressed, thank you very much!

@Anschke Thank you very much!!!! I really appreciate it! FYI I'm also reviewing the stacked options, also for vertical line (the same of horizontal bar). In the new version they will inherit the bar and line options in order to expose all the configuration. I don't know why I didn't yet :(

Recap for next version: There will be

• new chart classes, StackedHorizontalBarChart (already committed) and StackedVerticalLineChart. I have created those classes because the axes are created out of the box with the correct stacked and axis kind (but they could be overridden). I don't want to have 1 class where the user can set IndexAxis because this could not be reflect to the out of the box axes.
• new datasets classes for new chart ones (where indexAxis is set accordingly)
• new options classes for new chart ones. At the moment all stacked chart classes are using StackedOptions but that's not correct, in my opinion. I'm testing the code where the options will extend the right one (StackedBarChart will user StackeBarOptions which will extend BarOptions, the same for the line).

What do you think?

[stockiNail]

To keep you updated:

I have committed StackedHorizontalBarChart and StackedVerticalLineChart (and the relative GWT widgets in GWT.widgets package).

Thank to your issue, I have seen also some constraints that were implemented which are not in place anymore. I'm referring to, before this commit https://github.com/pepstock-org/Charba/commit/58b9f595bd41c9a81ea4f8e8eaac7703b1911a21, you couldn't add axes to the stacked chart classes, not stacked, and that was a useless limitation.

I have added the new use cases to showcase project, for next release, as well.

[stockiNail]

GWT widget showcase: https://github.com/pepstock-org/Charba-Showcase/blob/stock/src/org/pepstock/charba/showcase/client/cases/charts/StackedHorizontalBarCase.java

NO GWT widget (J2CL or Elemental2 based): https://github.com/pepstock-org/Charba-Showcase-J2CL/blob/stock/src/main/java/org/pepstock/charba/showcase/j2cl/cases/charts/StackedHorizontalBarCase.java

[Anschke]

That sounds awesome, thanks again!

Love the showcase! Had no chance to test your suggested solution since I had to do a huge Version Upgrade (from 3.3 to 5.6) but as soon as I managed that I will give you some feedback 😄

[stockiNail]

Take your time!!! it's a big change because you are going to new CHART.JS version 3 and Java 11!

I don't close this issue. I'll do before releasing new version, 5.7, so if there is any other issue, we can use this thread.

[stockiNail]

@Anschke I'm closing this issue because we released version 5.7 where this enhancement should be addressed. Let me know if it's ok for you