CODEWITHSUNDEEP
c#.netwinforms
Daniel Hamutel
Daniel Hamutel

Reputation: 653

How can i change my chart to look like column gradient fill style?

This is what I did in the constructor:

drawPoints.Clear();
paintToCalaculate = false;
chart1.Invalidate();
Series S0 = chart1.Series[0];
S0.ChartType = SeriesChartType.Column;
S0.IsValueShownAsLabel = true;
chart1.Series["Series1"]["PixelPointWidth"] = "0.6";
chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";
S0.Color = Color.Transparent;
S0.LegendText = "";
area.BackColor = Color.White;
area.BackSecondaryColor = Color.LightSteelBlue;
area.BackGradientStyle = GradientStyle.DiagonalRight;
area = chart1.ChartAreas[0];
chart1.Series["Series1"].Points.AddXY(10, 10);
area.AxisX.Minimum = 1;
area.AxisX.Maximum = 30;
area.AxisY.Minimum = 1;
area.AxisY.Maximum = 120;
area.AxisX.MajorGrid.LineColor = Color.LightSlateGray;
area.AxisY.MajorGrid.LineColor = Color.LightSlateGray;

The problem is that I'm using the chart paint event to draw points and lines:

Pen pen = new Pen(Color.Blue, 2.5f);
SolidBrush myBrush = new SolidBrush(Color.Red);
private void chart1_Paint(object sender, PaintEventArgs e)
{
    if (paintToCalaculate)
    {
        Series s = chart1.Series.FindByName("dummy");
        if (s == null) s = chart1.Series.Add("dummy");
        drawPoints.Clear();
        s.Points.Clear();
        foreach (PointF p in valuePoints)
        {
            s.Points.AddXY(p.X, p.Y);
            DataPoint pt = s.Points[0];
            double x = chart1.ChartAreas[0].AxisX.ValueToPixelPosition(pt.XValue);
            double y = chart1.ChartAreas[0].AxisY.ValueToPixelPosition(pt.YValues[0]);
            drawPoints.Add(new Point((int)x, (int)y));
            s.Points.Clear();
        }
        paintToCalaculate = false;
        chart1.Series.Remove(s);
    }

    foreach (Point p in drawPoints)
    {
        e.Graphics.FillEllipse(Brushes.Red, p.X - 2, p.Y - 2, 4, 4);
    }

    if (drawPoints.Count > 1)
    {
        e.Graphics.DrawLines(pen, drawPoints.ToArray());
    }
}

I wanted it to look like this style:

Chart

It should look like in the example. But since I'm using the paint event maybe it's not possible this way.

Edit tried this solution i added a new chart control for the test in the form1 designer called chart2. Then in the constructor i did:

chart2.Titles.Add(("Introducing Chart Controls"));

            ChartArea chartarea2 = new ChartArea("Main");
            chart2.ChartAreas.Add(chartarea2);

            Series seriesColumns = new Series("RandomColumns");
            seriesColumns.Color = Color.Blue;
            chart2.Series.Add(seriesColumns);
            Random rnd = new Random(10);
            for (int i = 0; i < 10; i++)
            {
                seriesColumns.Points.Add((rnd.Next(100)));
            }
            DataPoint dp = new DataPoint(seriesColumns);
            dp.Color = Color.Red;
            dp.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.LeftRight;
            seriesColumns.Points.Add(dp);

But no fade in/out color change. Nothing happen.

This is how chart2 look like:

chart2

Upvotes: 2

Views: 3818

Answers (1)

PiotrWolkowski
PiotrWolkowski

Reputation: 8782

To get the gradient effect you don't necessarily have to use the Paint event. The DataPoint has the BackGradientStyle property that will generate the gradient automatically for you. It will use the colour of the DataPoint. You set it like in the sample below:

var dp = new DataPoint(8D, 12D);
dp.Color = Color.Red;
dp.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.LeftRight;
var series = this.chart1.Series[0];
series.Points.Add(dp);

Here the gradient is fading out. If you want it to pass into another color set the BackSecondaryColor property.

dp.BackSecondaryColor = Color.Green;

Upvotes: 2

Related Questions