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

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

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

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!

Glad to hear it worked.

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

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

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
?

Sure, i’ll open a ticket

Edit: Created these tickets:

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


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

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