Line Chart with different colors on a different interval at x-axis fill in same series?

Question

I created a Line Chart control in Windows Forms.

I divided the ChartArea, AxisX into four intervals but I want to apply back color (unique color) to each interval.

Can someone help me on this?

Answer 1

AxisX into four intervals but I want to apply back color (unique color)

These intervals are created with colored StripLine(s). Either via code:

var stripLine = new System.Windows.Forms.DataVisualization.Charting.StripLine()
{
    BackColor = Color.Blue,
    IntervalOffset = 4, // This is where the stripline starts
    StripWidth = 2 // And this is how long the interval is
};

chart1.ChartAreas[0].AxisX.StripLines.Add(stripLine);

You need to add data points for the interval to show.

Or, StripLines can also be added from VS design mode from (Properties) -> ChartAreas -> Select a ChartArea -> Axes -> Select the Axis you want it to show on -> StripLines, then Add StripLine. You have to set a BackColor, IntervalOffset and StripWidth for it to show. If you set StripLine.Interval it will repeat by that interval.

Answer 2

You could paint those areas, but this would always show above all chart elements including grid and data points.

So, as NLindborn suggests, the best way are StripLines.

They are under all elements and will scale nicely.

Note that their properties are in data values, so you need to know the values, or rather the x-axis range, in your chart.

Here is complete code example using StripLines:

// set up the chart:
ChartArea ca = chart.ChartAreas[0];
chart.Series.Clear();
for (int i = 0; i < 5; i++)
{
    Series s = chart.Series.Add("Series" + (i+1));
    s.ChartType = SeriesChartType.Line;
    s.BorderWidth = 2;
}

// add a few test data
for (int i = 0; i <= 360; i++)
{
    chart.Series[0].Points.AddXY(i, Math.Sin(i * Math.PI / 180f));
    chart.Series[1].Points.AddXY(i, Math.Cos(i * Math.PI / 180f));
    chart.Series[2].Points.AddXY(i, Math.Sin(i * Math.PI / 90f));
    chart.Series[3].Points.AddXY(i, Math.Cos(i * Math.PI / 90f));
    chart.Series[4].Points.AddXY(i, Math.Sin(i * Math.PI / 30f));
}
      
// set up the chart area:  
Axis ax = ca.AxisX;
ax.Minimum = 0;
ax.Maximum = 360;
ax.Interval = 30;

// a few semi-transparent colors
List<Color> colors = new List<Color>()  { Color.FromArgb(64, Color.LightBlue),  
  Color.FromArgb(64, Color.LightSalmon),  Color.FromArgb(64, Color.LightSeaGreen),  
  Color.FromArgb(64, Color.LightGoldenrodYellow)};

Now we are ready to create the StripLines:

// this is the width of the chart in values:
double hrange = ax.Maximum - ax.Minimum;

// now we create and add four striplines:
for (int i = 0; i < 4; i++)
{
    StripLine sl = new StripLine();
    sl.Interval = hrange;                   // no less than the range, so it won't repeat
    sl.StripWidth = hrange / 4f;            // width
    sl.IntervalOffset = sl.StripWidth * i;  // x-position
    sl.BackColor = colors[i];
    ax.StripLines.Add(sl);
}

Note that you will need to adapt the stripline data whenever you change the axis range!

Also note the StripLine use axis values.

Update:

One common issue is to move the striplines when zooming. Without a little help they will stick to the original positions. Codeing the AxisViewChanged will help, maybe like so:

For each of your striplines calculate an IntervalOffset; in the simplest case of the 1st one this should work:

   chart1.ChartAreas[0].AxisX.StripLines[0].IntervalOffset = 
           chart1.Series[0].Points[0].XValue - e.NewPosition;

For the others add the correct multiple of the width as above!