pepstock-org/Charba

Turn StackedBarChart into horizontal bar chart

Anschke opened this issue · 10 comments

Anschke commented

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.
image

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 commented

@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:

image

stockiNail commented

@Anschke FYI I have already committed d9e64e2 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 commented

I have implemented 0034ad9 a specific chart for stacked horizontal bar.

Anschke commented

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 commented

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 commented

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 58b9f59, 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.

Anschke commented

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 😄

  • 👍1
  • 🚀1
stockiNail commented

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 commented

@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

  • 👍1
  • 🎉1