Charting - Set grid above the graph

Question

I'm working with the System.Windows.Forms.DataVisualization.Charting library of C# in Visual Studio. Creating the graphs themselves is no problem, however, since I'm using SeriesChartType.StackedArea100 for my serieses (which always fills the vertical graph space 100%), the grid (X & Y) is completely covered by the graphs.

However, I want the X-grid to be above the graphs, so it's easier to see which point belongs to what.

Am I missing something obvious here?

You could make the DataPoints color semi-transparent. Or paint a Grid in the PostPaint event. — TaW, Jun 13 '16 at 08:19
@TaW: That sounds good, do you have an approach for drawing a Grid myself with that event? The chart is `CursorX.IsUserSelectionEnabled = true`, so users can select ranges of it, zoom in and scroll along. How would I get started drawing the right amount of lines and the furthermore on the appropriate X-coordinates? Is there anything, that saves me the work of implementing it fully by myself? @sowjanyaattaluri: Thanks I'm already doing that, but I'm using >20 serieses, so it becomes tedious to look up the tooltips every time. — Brauser, Jun 13 '16 at 08:34

score 4 · Accepted Answer · edited May 23 '17 at 12:08

Gridlines are always drawn under the DataPoints.

One option is to make the Colors of the DataPoints semi-transparent.

Here is an example:

chart1.ApplyPaletteColors();  // necessary to access the original colors
if (checkBox1.Checked)
{
    foreach (Series s in chart1.Series) s.Color = Color.FromArgb(192, s.Color);
}

You can raise alpha to 224 and still see the lines.

Or you could owner-draw GridLines in one of the xxxPaint events; but that of course is a little more complicated. OK, a lot more..

The drawing itself is regular GDI+ drawing with DrawLine calls in two loops.

But to get the loops and the coordinates right you need to :

Make sure you know/control the Minimum, Maximum & Interval for the axes. If they are not set but still on their auto-values you need to find a way to get at them.
know the Rectangle of the InnerPlotPosition in pixels(!). See here for two functions that will help you !

Here is an example:

private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
    if (checkBox1.Checked) return;

    ChartArea ca = chart1.ChartAreas[0];
    RectangleF ipar = InnerPlotPositionClientRectangle(chart1, ca);
    Axis ax = ca.AxisX;
    Axis ay = ca.AxisY;
    Color gc = ax.MajorGrid.LineColor;
    Pen pen = new Pen(gc); 
    double ix = ax.Interval == 0 ? 1 : ax.Interval;  // best make sure to set..
    double iy = ay.Interval == 0 ? 50 : ay.Interval; // ..the intervals!

    for (double vx = ax.Minimum; vx <= ax.Maximum; vx+= ix)
    {
        int x = (int)ax.ValueToPixelPosition(vx) + 1;
        e.ChartGraphics.Graphics.DrawLine(pen, x, ipar.Top, x, ipar.Bottom);
    }

    for (double vy = ay.Minimum; vy <= ay.Maximum; vy += iy)
    {
        int y = (int)ay.ValueToPixelPosition(vy) + 1;
        e.ChartGraphics.Graphics.DrawLine(pen, ipar.Left, y, ipar.Right, y);
    }
    pen.Dispose();
}

You should disable the GridLines and maybe even make the the Axes transparent:

chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
chart1.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
chart1.ChartAreas[0].AxisX.LineColor = Color.Transparent;
chart1.ChartAreas[0].AxisY.LineColor = Color.Transparent;

Thank you for that! I guess drawing the GridLines is done via standard Pens and Brushes? If I fail to implement it, I'll resort to using colors with reduced opacity. — Brauser, Jun 13 '16 at 08:41
This is super helpful, thank you so much for all your effort, now the question is thoroughly solved in every aspect. — Brauser, Jun 15 '16 at 20:46

Charting - Set grid above the graph

1 Answers1