Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Vaadin Charts 3.0.0 - Grid Lines in multiple axis chart

Mauro Ceraso
5 years ago May 04, 2016 3:36pm

Hi,

I build a "multichart", a chart with multiple Y-Axis (three linear to be precise) and one DateTime X-Axis.
On two of the Y-Axis, Columns charts are displayed, on the last one a series chart.

I'm trying to display the grid lines on the background of the charts but setting the gridLine width and color on all the axis did't worked.

Any suggestion?

Thanks in advice.

 

Guillermo Alvarez
5 years ago May 05, 2016 9:15pm

Hi,

Have you seen this demo? http://demo.vaadin.com/charts/#MultipleAxes 

Are those horizontal grid lines the ones you want to show? Or did I miss something?

Regards

Mauro Ceraso
5 years ago May 09, 2016 8:07am

Thanks for your answer and sorry for the delay.

Yes they are the grid lines we want to show, but what we would like to do (as we did with our old UI framework) is to have multiple charts stacked on on top of the other in the same (multi)chart, not overlapped as they are in the demo.

We are able to draw them stacked charts using different Y axis, but we are not able to draw the background grid lines.
 

Guillermo Alvarez
5 years ago May 09, 2016 8:13am

Ok, I get the point now.

Could you provide a small example of stacked charts with multiple axis where you can't see the grid lines?

Regards

Mauro Ceraso
5 years ago May 09, 2016 8:37am

Attached you can find a screenshot of my test with a Area charts on top and a series chart on bottom.

Here is an excerpt of the Y axis configuration:

yAxis.setType(AxisType.LINEAR);
            
            yAxis.setGridLineWidth(2);
            yAxis.setGridLineColor(SolidColor.BLACK);
            yAxis.setTickInterval(20);
            
            yAxis.setLineWidth(2);

 

Jens Jansson
5 years ago May 23, 2016 7:56pm

Test out if the order that you add the data series have an affect on anything. First data series usually has priority when configuring global matters. Try with one data series, and when the gridlines are visible, try to add the second. See in which moment it breaks. Is it some certain series type that breaks it?

Guillermo Alvarez
5 years ago Aug 16, 2016 5:08pm

As mentioned in https://vaadin.com/forum#!/thread/13538580 ticket https://dev.vaadin.com/ticket/20035 was created and now is on review. It should be merged soon and released in next maintenance or minor version.