Problem with drawing order axis line & grid on TChart

[VisualLab]

I'm using the TChart control to draw a chart (in this case, a polynomial, but the type of curve doesn't matter). The project uses two axes: left and bottom. The chart contains one series. I have a few issues with this chart. I marked them in the attached screenshot.

Issue. 1. During drawing, the grid line associated with the vertical axis obscures the horizontal axis. The axis is partially or completely obscured depending on the axis line thickness set. The ZOrder property of either axis does not help at all, because the grid lines are closely related to the axes. Observing the behavior of the TChart class indicates that the internal objects of the TChart control are redrawn sequentially on the specified canvas. If they are indeed drawn this way, this is an incorrect drawing order. Chart elements should be drawn as follows:

• grid (both lines: horizontal and vertical),
• axis lines,
• axis tick marks,
• axis tick labels,
• axis title labels,
• series (curves),
• chart legend,
• chart title.

Grid lines (both horizontal and vertical) should always be drawn first, so they don't obscure axis lines, labels, or series.

Issue. 2 & 3. The axis titles (in this case: x and y) are superimposed on the axis elements (lines, markers, labels). This can be seen in the attached screenshot. It would be useful to be able to choose the position of the axis title relative to the axis lines.

So I have the following questions:

1. Can I change the drawing order of the grid lines themselves? If so, how do you do it?
2. Can I move (reposition) the position of the axis titles? If so, how do you do it?

[wp]

1. Can I change the drawing order of the grid lines themselves? If so, how do you do it?

The problem is that every axis is painted at once. I.e. first grid and marks, then minor grid, then axis line with title. Since each axis does not know anything about the others it cannot  be avoided that, like in your case, the following axis paints its grid over the axis line of the previously drawn axis. Changing the Z order does not help, it just paints the grid over the other axis line.

I don't know yet how complicated it is to split the drawing process of the axes into two runs: the first one to draw the grid and the second one to draw the axis line.

There is a workaround, though. You can add a TConstantLine series which you rotate and position by means of the "Linestyle" and "Position" properties, respectively, to be drawn exactly over the "broken" axis line. Uncheck its "Legend.Visible" property to avoid having it in the legend.

2. Can I move (reposition) the position of the axis titles? If so, how do you do it?

You can't - centering the axis title is hard-coded in the TChartAxis code...

But I found this location in the code and decided to extend the positioning code by a new TChartTitle property "Anchor: TChartTextAnchor = (ctaStart, ctaCenter, ctaEnd)". The current behaviour is Anchor = ctaCenter which centers the title along its axis. ctaStart moves the title to the start of the axis line, ctaEnd to the end. The new version has been committed to the Lazarus repository.

See in the attached screenshot what a chart created with the workaround for issue #1 and the fix for issue #2 looks like (NB: I am noticing here, that still some refinements are required for the title positioning...)

[wp]

NB: I am noticing here, that still some refinements are required for the title positioning...

Added another AxisTitle property, AnchorDistance, which allows to move the titles at the start/end by some amount away from the end of the chart area.

[VisualLab]

1. Can I change the drawing order of the grid lines themselves? If so, how do you do it?

The problem is that every axis is painted at once. I.e. first grid and marks, then minor grid, then axis line with title. Since each axis does not know anything about the others it cannot  be avoided that, like in your case, the following axis paints its grid over the axis line of the previously drawn axis. Changing the Z order does not help, it just paints the grid over the other axis line.

I don't know yet how complicated it is to split the drawing process of the axes into two runs: the first one to draw the grid and the second one to draw the axis line.

I will wait patiently until this problem is solved

There is a workaround, though. You can add a TConstantLine series which you rotate and position by means of the "Linestyle" and "Position" properties, respectively, to be drawn exactly over the "broken" axis line. Uncheck its "Legend.Visible" property to avoid having it in the legend.

For now, any workaround is better than nothing.

2. Can I move (reposition) the position of the axis titles? If so, how do you do it?

You can't - centering the axis title is hard-coded in the TChartAxis code...

But I found this location in the code and decided to extend the positioning code by a new TChartTitle property "Anchor: TChartTextAnchor = (ctaStart, ctaCenter, ctaEnd)". The current behaviour is Anchor = ctaCenter which centers the title along its axis. ctaStart moves the title to the start of the axis line, ctaEnd to the end. The new version has been committed to the Lazarus repository.

See in the attached screenshot what a chart created with the workaround for issue #1 and the fix for issue #2 looks like (NB: I am noticing here, that still some refinements are required for the title positioning...)

NB: I am noticing here, that still some refinements are required for the title positioning...

Added another AxisTitle property, AnchorDistance, which allows to move the titles at the start/end by some amount away from the end of the chart area.

Thanks. This is very good news

[wp]

I was able to split axis drawing into two "layers", one for grid and related, and one for axisline and axis title (https://gitlab.com/freepascal.org/lazarus/lazarus/-/commit/50f02a7cabcb9e97adcd0e505030ed6d8dea107a). The workaround with the auxiliary TConstLine series is no longer needed.

[VisualLab]

I was able to split axis drawing into two "layers", one for grid and related, and one for axisline and axis title (https://gitlab.com/freepascal.org/lazarus/lazarus/-/commit/50f02a7cabcb9e97adcd0e505030ed6d8dea107a). The workaround with the auxiliary TConstLine series is no longer needed.

Thank you for the fixes (updates) to the chart class. The grid now draws correctly, as can be seen in the attached screenshot.

I also noticed a minor issue with the vertical axis title. If I manually change the Orientation property in the font of the vertical axis from 900 to 0, then:

• it is displayed correctly (i.e., horizontally) during the design phase,
• after compiling and running the program, it is displayed vertically again.

However, when I add the following code to the chart drawing routine:

Code: Pascal  [Select][+][-]

1. ChartView.LeftAxis.Title.LabelFont.Orientation := 0;

the vertical axis title is displayed correctly. There's probably a minor issue somewhere in the axis drawing routine with the drawing of the axis title after the chart control is displayed at runtime.

[wp]

Sorry, this is caused by a recent change by myself which linked the axis title font orientation to the axis direction ("Alignment"). I reverted the related commits, TChartAxis.LabelFont.Orientation should work again as before.