Brauser
Brauser

Reputation: 159

Charting - Set grid above the graph

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?

Upvotes: 2

Views: 1329

Answers (1)

TaW
TaW

Reputation: 54433

Gridlines are always drawn under the DataPoints.

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

Here is an example:

enter image description here

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:

enter image description here

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;

Upvotes: 4

Related Questions