ASP.NET MVC Chart Helper. How to set different color for each Bar/Column on chart?

9
votes

I am using the ASP.NET MVC 3.0 Chart Helper.

Fore some reason colors scheme (e.g Rainfall) applied only for Pie and Doughnut charts and not for any another types (Bar, Column etc).

The bars/columns on all another charts has all the same color. How to fix that?

Here is my chart:

chart = new System.Web.Helpers.Chart(width: 100, height: 200)
                .AddSeries(
                    chartType: Bar,
                    legend: Rainfall
                    xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
                    yValues: new[] { "20", "20", "40", "10", "10" });
            }

Also i was trying to use all schemes from System.Web.Helpers public static class ChartTheme, none of these helped

2
asp.net-mvc-3charts

2 Answers

6
votes

I found something that works ... its not great but it works

using the old Charting

using System.Web.UI.DataVisualization.Charting;

 public ActionResult GetRainfallChart()
    {
        Chart chart = new Chart();
        chart.BackColor = Color.Transparent;
        chart.Width = Unit.Pixel(1400);
        chart.Height = Unit.Pixel(750);

        Series series1 = new Series("Series1");
        series1.ChartArea = "ca1";
        series1.ChartType = SeriesChartType.Bar;
        series1.Font = new System.Drawing.Font("Verdana", 11f, FontStyle.Regular);
        series1.Points.Add(new DataPoint
        {
            AxisLabel = "A",
            YValues = new double[] { 100 },
            Color = Color.Green,
        });
        series1.Points.Add(new DataPoint
        {
            AxisLabel = "B",
            YValues = new double[] { 324 },
            Color = Color.Red,
        });
        series1.Points.Add(new DataPoint
        {
            AxisLabel = "C",
            YValues = new double[] { 235 },
            Color = Color.Yellow,
        });

        chart.Series.Add(series1);

        ChartArea ca1 = new ChartArea("ca1");
        ca1.BackColor = Color.Transparent;
        chart.ChartAreas.Add(ca1);

        var ms = new MemoryStream();

        chart.SaveImage(ms, ChartImageFormat.Png);
        ms.Seek(0, SeekOrigin.Begin);

        return new FileStreamResult(ms, "image/png");



    }

Yes he is correct. One more information Chart Helper in System.Web.Helpers internally use 'using DV = System.Web.UI.DataVisualization.Charting;' ASP.Net chart control only but wrapped with limited access.

Its better you can use ASP.Net chart if you need more functions

4
votes

Maybe you found the answer a long time ago but given the fact that I found very little on this topic when searching for a way to colorize the bars of a chart I thought it might be useful to post the solution here when it opened up to me.

It seems that the implementation of System.Web.Helpers.Chart is closely related to System.Web.UI.DataVisualization.Charting.Chart. Given this, I managed to find some clues as to how I could configure the "theme" XML properties:

public const String CHARTS_THEME = @"<Chart BackColor=""#EFEFEF"" BackGradientStyle=""TopBottom"" BorderColor=""#A0A0A0"" BorderWidth=""1"" Palette=""None"" PaletteCustomColors=""#ffcc00"" >
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderWidth=""1"" BorderColor=""#A0A0A0"" BorderDashStyle=""Solid"" >
<AxisY>
<MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />    
<LabelStyle Font=""Verdana, 10pt"" />
</AxisY>
<AxisX LineColor=""#000000"">
<MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />
<LabelStyle Font=""Verdana, 10pt"" />
</AxisX>
</ChartArea>
</ChartAreas>
<Legends>
<Legend _Template_=""All"" BackColor=""Transparent"" Docking=""Bottom"" Font=""Verdana, 10pt, style=Plain"" LegendStyle=""Row"">
</Legend>
    </Legends>                          
</Chart>";

Key to this point is to define your own PaletteCustomColors (I have only one color). To make this work, the Palette property must be set to None.

Finally, just use your theme when creating an instance of your chart:

Chart chart = new Chart(width: 600, height: 200, theme:CHARTS_THEME);

Also check out the msdn documentation of System.Web.UI.DataVisualization.Charting.Chart to discover other ways to style your chart:

http://msdn.microsoft.com/en-us/library/dd467201.aspx