Vertical and horizontal grid lines are not visible inside the area chart

[pwankhed]

Awesome library, love it especially due to real-time features like .repaintChart().

Is there a way to make the gridlines visible within the area chart? For now, grid lines are visible but they are in the background. Is it possible to achive something like this?

At present, it appears like this

I want my chart to show the gridlines in the background.

I set the following properties to true but had no luck. Am I missing something? Thanks again!

xyChart.getStyler().setPlotGridVerticalLinesVisible(true);
xyChart.getStyler().setPlotGridHorizontalLinesVisible(true);

[pwankhed]

Fyi, I tried achieving this with colour Opacity but had no luck. with the following code, the colour becomes transparent but gridlines are still invisible.

totHeapSeries.setFillColor(new Color(1f,0f,0f,.5f)

[Mr14huashao]

@pwankhed

chart.getStyler().isPlotGridVerticalLinesVisible() and
chart.getStyler().isPlotGridVerticalLinesVisible() is true by default.

// Customize Chart
chart.getStyler().setPlotBackgroundColor(new Color(255, 204, 102));
chart.getStyler().setPlotGridLinesColor(Color.GRAY);
Stroke plotGridLinesStroke = new BasicStroke(0.3f);
chart.getStyler().setPlotGridLinesStroke(plotGridLinesStroke);

like this:

[timmolter]

As far as I'm aware they are always visible. Is it really not the case for you?

[Mr14huashao]

@timmolter
Yes, it is visible by default.

Should be the default grid line and background color, which does not reach what @pwankhed wants.

It may be that @pwankhed does not know how to set the style, so I simply customized the style to see if he wanted it.

[Mr14huashao]

@timmolter
This issu does not need to be set as a Feature Request, I think it is a usage problem. I will pay attention to what @pwankhed says.

[pwankhed]

Thanks @timmolter and @Mr14huashao for your help. I am able to replicate it locally by feeding temp inputs to my charts, I have attached my simplified code for your reference, please take a look. (Similar code is used in my actual project)

398_code.zip

In brief, I am trying to create JVIsual like memory monitoring tool for my java based node processes. Everything is working great except for the grid lines.

Note: Not sure why the temp code attached above does not generate/show the orange area line properly, it just shows the light blue one but that is not my issue. In my actual program, both orange and blue area lines appear properly. All I have changed is the way data is fed to Charts. My actual code generates charts like this, only issue is background grids.

[Mr14huashao]

@pwankhed
addSeries, big data comes first

XYSeries usedHeapSeries, totHeapSeries;

totHeapSeries = xyChart.addSeries(Ser2_TotHeap, nodeRunTime, totHeapMemData);
		
usedHeapSeries = xyChart.addSeries(Ser1_UsedHeap, nodeRunTime, usedHeapMemData);

The effect is as follows:

xyChart.getStyler().setDefaultSeriesRenderStyle(XYSeriesRenderStyle.Area), this style draw the area, drawing the series behind will cover the previous series.

Can it be changed to draw lines,set style xyChart.getStyler().setDefaultSeriesRenderStyle(XYSeriesRenderStyle.Line), like this:

[pwankhed]

Thanks @Mr14huashao for your help. As I mentioned, I was trying to make it look like a JVisualVM or precisely, I want to show the heap that process is using hence I thought, using an Area chart would help. I can certainly use line chart but not sure if that really conveys the message. If there is no other work-around, can this be considered as enhancement request?

[Mr14huashao]

@pwankhed
I understand your needs, you want to display vertical and horizontal grid lines in the filled area.

This requires setting the transparency of the fill color.

usedHeapSeries.setFillColor(new Color(249, 220, 182, 180));

totHeapSeries.setFillColor(new Color(208, 241, 252, 180));

Single series:

However, there is still a problem, the color of ths overlapping part will chang.
Multiple series:

[Mr14huashao]

Add series, put Ser1_UsedHeap behind

totHeapSeries = xyChart.addSeries(Ser2_TotHeap, nodeRunTime, totHeapMemData);
usedHeapSeries = xyChart.addSeries(Ser1_UsedHeap, nodeRunTime, usedHeapMemData);

The result is this:

[pwankhed]

Thanks @Mr14huashao! With all your help, I could achieve what I was looking for. Here are the final results now.

Setting the colour in proper format did the trick:

usedHeapSeries.setFillColor(new Color(249, 220, 182, 180));

I confirm that this is now resolved and can be marked as closed.

[pwankhed]

As per above comments, I confirm that this issue is solved.