How to Set Chart Series Colors in MVC 3?

Question

I'm using

System.Web.Helpers.Chart

to display charts in my MVC3 application.

@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Resource Utilization in Projects in Week 1")
        .AddSeries(
            name: "Project1",
            chartType: "StackedColumn",
            xValue: new[] { "W1", "W2", "W3", "W4", "W5" },
            yValues: new[] { 80, 60, 40, 20, 10}
        )
        .AddSeries(
            name: "Project2",
            chartType: "StackedColumn",
            xValue: new[] { "W1", "W2", "W3", "W4", "W5" }, 
            yValues: new[] { 10, 10, 0, 10, 10 }
        )
        .AddSeries(
            name: "Available",
            chartType: "StackedColumn",
            xValue: new[] { "W1", "W2", "W3", "W4", "W5" }, 
            yValues: new[] { "10", "30", "50", "70", "80" }
        )
        .AddLegend();        

        myChart.Write();
}

However the colors of series are picked randomly by how many series there are on the chart. Does anyone know how to set specific color to certain series?

I found Charting samples online for setting colors, but they are using the namespace

System.Web.UI.DataVisualization.Charting

Answer 1

For MVC projects I find it easier to fine tune chart appearance by putting the theme into an external XML file. E.g. you can put an XML file into your Content folder and then reference it in the Chart constructor like this:

var myChart = new Chart(width: 600, height: 200, themePath: "/Content/chart/ChartTheme.xml")

You can then style all aspects, including colour Palette in the XML. The structure of the XML reflects the various classes and properties used in the a Chart instance. For guidance you can check the MSDN documentation of the classes, starting here.

For changing the ColorPallette specifically check https://crmchartguy.wordpress.com/2012/08/23/palette-custom-colors-in-charts/

This is a sample chart theme in XML:

<?xml version="1.0" encoding="utf-8" ?> 
<Chart BackColor="#ffffff" 
   BorderStyle="None"
   Palette="None"
   PaletteCustomColors="#0033cc; #ff3300">
  <ChartAreas>    
    <ChartArea Name="Default" _Template_="All" 
           BackColor="White" 
           ShadowColor="#aaaaaa"
           ShadowOffset="2"
           BorderColor="#cccccc" 
           BorderDashStyle="Solid"  
           Position="-1,0,100,75">      
      <AxisY LineColor="#cccccc" IsLabelAutoFit="false" IsMarginVisible="true">        
        <MajorGrid Interval="Auto" LineColor="#cccccc" />   
        <MajorTickMark LineColor="#aaaaaa" LineWidth="1" LineDashStyle="Solid" /> 
        <LabelStyle Font="Helvetica Neue, 10 px" />      
      </AxisY>      
      <AxisX LineColor="#cccccc" IsLabelAutoFit="false" IsMarginVisible="true">        
        <MajorGrid LineColor="#cccccc" /> 
        <MajorTickMark LineColor="#666666" />   
        <LabelStyle Font="Helvetica Neue, 10 px" Format="d-M-yyyy"/>      
      </AxisX>     
     </ChartArea>  
    </ChartAreas>  
    <Legends>    
      <Legend _Template_="All" 
        Alignment="Center" 
        BackColor="Transparent" 
        Docking="Bottom" 
        Font="Helvetica Neue, 12 px" 
        IsTextAutoFit ="False" 
        LegendStyle="Row">   
    </Legend>  
  </Legends> 
</Chart>

Answer 2

You need to create a ChartTheme if you want to customise the chart. Unfortuantely these look a little bit hacky...

Eg. try setting a theme like this:

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)

You'll notice your chart looks different. If you click on ChartTheme.Green and press F12 (Go To Definition), you'll see the ChartTheme class is full of huge strings defining how the charts are styled:

public const string Blue = @"<Chart BackColor=""#D3DFF0"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""BrightPastel"">
    <ChartAreas>
        <ChartArea Name=""Default"" _Template_=""All"" BackColor=""64, 165, 191, 228"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"" /> 
    </ChartAreas>
    <Legends>
        <Legend _Template_=""All"" BackColor=""Transparent"" Font=""Trebuchet MS, 8.25pt, style=Bold"" IsTextAutoFit=""False"" /> 
    </Legends>
    <BorderSkin SkinStyle=""Emboss"" /> 
  </Chart>";

There's a huge amount of stuff you can customise in this XML (why XML? I don't know!), though the type of chart etc. that you use will influence much of what you can do. You can find the docs for this here:

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

Edit: This link may also be useful:

New asp.net charting controls - will they work with MVC (eventually)?

Answer 3

This blog article desribes how to change the colors of your series Setting Microsoft Chart Series Colors

If you want to use the XML format instead then copy the following code where I have changed the color to Red.

    public class CustomChartTheme
{
    public const string Red = @"<Chart BackColor=""#58A5CB"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""None"" PaletteCustomColors=""Red"">
<ChartAreas>
    <ChartArea Name=""Default"" _Template_=""All"" BackColor=""64, 165, 191, 228"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"" /> 
</ChartAreas>
<Legends>
    <Legend _Template_=""All"" BackColor=""Transparent"" Font=""Trebuchet MS, 8.25pt, style=Bold"" IsTextAutoFit=""False"" /> 
</Legends>
<BorderSkin SkinStyle=""Emboss"" />   </Chart>";
}