[Vaadin Charts] share one x-Axis with stacked y-Axis

Flow
1

Hi There

I’m trying to create a chart, that has only one x-Axis but multiple y-Axis that are stacked (not overlaying).
In the Attachement, there is a Image from JFreeCharts of what i want to achieve.

Do you Guys know, if this is possibly and how i could do this?

Thanks in advance!
René
26502.png

2

Did a quick test and looks like you need to set offset 0 to the different Yaxes and also set their sizes and top position.

I only used two series and code looks like this:

Chart chart = new Chart(ChartType.COLUMN);
Configuration conf = chart.getConfiguration();
conf.getChart().setAlignTicks(false);
conf.setTitle("");

XAxis x = new XAxis();
x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
        "Sep", "Oct", "Nov", "Dec");
conf.addxAxis(x);

YAxis y0 = new YAxis();
y0.setMin(0);
y0.setHeight("100");
y0.setTitle("Process Load");
conf.addyAxis(y0);

YAxis y1 = new YAxis();
y1.setMin(0);
y1.setTitle("Live Threads");
y1.setTop("200");
y1.setHeight("100");
y1.setOffset(0);
conf.addyAxis(y1);

ListSeries series0 = new ListSeries("Process Load", 49.9, 71.5, 106.4,
        129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
ListSeries series1 = new ListSeries("Live Threads", 83.6, 78.8, 98.5,
        93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3);
conf.addSeries(series0);
conf.addSeries(series1);
series1.setyAxis(y1);

I’m also attaching the output I got. One downside of this is that it looks like it requires absolute values for sizes.
Hope this helps!

26504.png

3

Awesome!

Works perfect, just the tooltips from axis1 are missplayed right now, but i’m sure i can fix this :slight_smile:

Thanks for the fast and helpfull answer!

4

Glad to hear it worked.

Not sure what you mean with axis tooltip but hope you can solve it, otherwise just post it

5

The problem is, that the tooltip won’t show at the right position, as you can see in the picture i attached.

I also have a second problem. Somehow i can’t force the Chart to draw the grid lines if the yAxis has a fixed height…
I tried:

y0.setLineWidth(2); y0.setGridLineColor(new SolidColor("black")); y0.setGridLineDashStyle(DashStyle.SOLID); y0.setGridLineWidth(1); y0.setType(AxisType.LINEAR);
https://vaadin.com/forum/#!/thread/13013570/13013569
Looks like the same problem as this one

Thanks for helping!

26506.png

6

Ok, now I understand both problems, they seem to be two separate issues when using axes on this way :(. Could you report them in
dev.vaadin.com
?

7

Sure, i’ll open a ticket

Edit: Created these tickets:

https://dev.vaadin.com/ticket/20035


https://dev.vaadin.com/ticket/20036

8

Thanks for creating the issues, both of them are now in review and should be released in next maintenance or minor release.