Question

I’m prototyping a chart using ASP.NET Chart Controls. I have the following code to generate my chart. I’m trying to get as close to the client’s brand guidelines as possible. The brand guidelines are using gradients in the pie chart segments. Is this possible when using custom colours?

    /// <summary>
    /// Create an image of a chart from the given data
    /// </summary>
    /// <param name="data">Dictionary of data, labels as key and value as value.</param>
    /// <returns>The bytes of an image</returns>
    private Byte[] CreatePieChart(Dictionary<string,string> data)
    {
        //Set up the chart
        var chart = new Chart
        {
            Width = 550,
            Height = 400,
            RenderType = RenderType.BinaryStreaming,
            AntiAliasing = AntiAliasingStyles.All,
            TextAntiAliasingQuality = TextAntiAliasingQuality.High
        };

        //Add the title
        chart.Titles.Add("Chart 1");
        chart.Titles[0].Font = new Font("Arial", 16f);

        //Set up labels etc
        chart.ChartAreas.Add("");
        chart.ChartAreas[0].AxisX.TitleFont = new Font("Arial", 12f);
        chart.ChartAreas[0].AxisY.TitleFont = new Font("Arial", 12f);
        chart.ChartAreas[0].AxisX.LabelStyle.Font = new Font("Arial", 10f);
        chart.ChartAreas[0].AxisX.LabelStyle.Angle = -90;
        chart.ChartAreas[0].BackColor = Color.White;

        //Set up the series and specify Pie chart
        chart.Series.Add("");
        chart.Series[0].ChartType = SeriesChartType.Pie;
        chart.Series[0].SetCustomProperty("PieLabelStyle", "outside");
        chart.Series[0].IsValueShownAsLabel = true;
        chart.Series[0].BackGradientStyle = GradientStyle.Center;

        //MAke the chart 3D
        chart.ChartAreas[0].Area3DStyle.Enable3D = true;
        //chart.ChartAreas[0].Area3DStyle.Perspective = 75;
        chart.ChartAreas[0].Area3DStyle.Inclination = 0;

        //Loop over the data and add it to the series
        foreach (var item in data)
        {
            chart.Series[0].Points.AddXY(item.Key, Convert.ToDouble(item.Value));
        }

        //Add a legend
        chart.Legends.Add("");
        chart.Legends[0].InsideChartArea = "";

        Color[] myPalette = new Color[6]{ 
             Color.FromArgb(255,101,187,226), 
             Color.FromArgb(255,253,214,91), 
             Color.FromArgb(255,38,190,151), 
             Color.FromArgb(255,253,183,101),
             Color.FromArgb(255,218,143,183),
            Color.FromArgb(255,242,242,242)};

        chart.Palette = ChartColorPalette.None;
        chart.PaletteCustomColors = myPalette;

        byte[] chartBytes;

        //Write the chart image to a stream and get the bytes
        using (var chartimage = new MemoryStream())
        {
            chart.SaveImage(chartimage, ChartImageFormat.Png);
            chartBytes = chartimage.GetBuffer();
        }

        return chartBytes;
    }

Answer 1

It is possible to get a gradient on a pie chart with ASP.NET charting.

Here’s the relevant lines:

        Color[] myPalette = new Color[5]{ 
             Color.FromArgb(255,101,187,226), 
             Color.FromArgb(255,253,214,91), 
             Color.FromArgb(255,38,190,151), 
             Color.FromArgb(255,253,183,101),
             Color.FromArgb(255,218,143,183)};

        chart.Palette = ChartColorPalette.None;
        chart.PaletteCustomColors = myPalette;

        //Loop over the data and add it to the series
        int i = 0;
        foreach (var item in data)
        {
            chart.Series[0].Points.AddXY(item.Key, Convert.ToDouble(item.Value));
            chart.Series[0].Points[i].BackGradientStyle = GradientStyle.Center;
            chart.Series[0].Points[i].Color = myPalette[i];
            chart.Series[0].Points[i].BackSecondaryColor = LightenColor(myPalette[i]);
            //chart.Series[0].Points[i].SetCustomProperty("Exploded","true");

            i++;
        }

Prototype code. Produces a passable gradient.