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

score 9 · Accepted Answer · edited May 23 '17 at 12:25

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)?

Thank you for your response. Do you know where I could find syntax definition of the XML format of ? because I was able to change the back color of the entire chart, but I'm interested in setting the color of a specific series. Any idea how to do that? — ala, May 02 '11 at 01:55
The link at the bottom of my answer describes the objects - I'm guessing it's just a serialised version of those classes, so you can just add the names of the properties/classes to the HTML. If you view the definition of all of the properties in the ChartHelper class there should be samples of a lot of it — Danny Tuppeny, May 02 '11 at 05:31
Any idea on how to change properties that are under the Series property like IsValueShownAsLabel? — Ingó Vals, Mar 14 '12 at 17:13

score 2 · Answer 2 · answered Sep 17 '15 at 11:38

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>

Having an external xml file is a really good idea. Otherwise you have to keep recompiling the application for each change. — eaglei22, Nov 15 '17 at 14:25
Also, what's interesting (unless it's some caching issue), the PaletteCustomColors only seemed to work when I used an xml file with themePath, rather than theme. — eaglei22, Nov 15 '17 at 18:54

score 2 · Answer 3 · answered Jan 16 '12 at 11:52

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>";
}

score 1 · Answer 4 · answered Apr 20 '15 at 20:11

I've been struggling with this as well and after reading the Microsoft documentation posted by Danny I finally found that the PaletteCustomColor attribute is the way to go. Here is an example of a theme with custom palette:

const string blue = @"<Chart BackColor=""#D3DFF0"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""None"" 
PaletteCustomColors=""97,97,97; 209,98,96; 168,203,104; 142,116,178; 93,186,215; 255,155,83; 148,172,215; 217,148,147; 189,213,151; 173,158,196; 145,201,221; 255,180,138"" >
  <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>";

score -1 · Answer 5 · answered Feb 03 '15 at 12:24

-1

you may try this. Its work for me

chart.Series[0].Color = System.Drawing.Color.FromArgb(31, 167, 215);

answered Feb 03 '15 at 12:24

dilipkumar1007

329
4
22

There is no options for Series in System.Web.Helpers.Chart – eaglei22 Nov 15 '17 at 14:04

How to Set Chart Series Colors in MVC 3?

5 Answers5

Linked