Home/ Questions/Q 4593504
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T22:41:38+00:00

I’m using System.Web.Helpers.Chart to display charts in my MVC3 application. @{ var myChart =

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0