How do I change chart parameters (e.g. pie slice colors) in chart created using Razor chart helper?

Question

I'm following the ASP.NET Razor Pages guide to generate charts in an ASP.NET MVC 3 view.

I can generate/display a pie chart. But I can't see how to change the colors of the pie slides - or explode a slice.

I've tried to reference the "Series" collection of the Chart object, but there doesn't see to be one.

Here's the code snippet I currently have.

<td>
    @{                
        Chart chart =
            new Chart(width: 100, height: 100)
                .AddSeries(chartType: "Pie", name: "Dafault", xValue: new[] { "Yes", "No" }, yValues: new[] { 70.2m, 29.8m });

        chart.Write();
    }
</td>

Can anyone tell me how I'd go about this?

Answer 1

Dommer,

I'm only one step ahead of you here, but you can create custom colors using the "themePath" property in the Chart's constructor. It's not well documented, but the themePath is a path to an XML document that describes the chart in detail. You can get samples of the XML by doing intellisense on the string consts in the Theme (which is an optional third parameter in Chart's constructor).

You can find a reference to themePath values and sample XML at the following link: http://www.mikepope.com/blog/documents/WebHelpersAPI.html#Chart

Now to custom colors. The XML in the theme files shows a Palette attribute in the Chart element. Set that to 'None', and add a 'PaletteCustomColors' attribute with a collection of RGB values like so:

PaletteCustomColors='0,0,255; 0,255,0; 255,0,0; 0,255,255; 255,0,255; 255,255,0'

Refer to your themePath in the contsructor like so:

string pathName = "~/Content/Test3DTheme.xml";
var chart = new Chart(width: 600, height: 400, themePath: pathName) [add methods here]

This should do it. As an aside, it appears that the theming protocol uses a lot of attributes that are properties in the System.Web.UI.DataVisualization.Chart. You can experiment (as I'm currently doing) by tweaking and adding/removing attributes to see what will change the look of your chart and what will break it. The parser is very persnickety about the attributes it accepts.

Hope this helps.

Jim Stanley

Blackboard Connect Inc.

Answer 2

You are using Charting available under System.Web.Helpers namespace. You will need a full charting component available under System.Web.UI.DataVisualization namespace. Here is the link to get started Charting with MVC Here is the link on how to use full blow charting features with interactivity. Charting with interactivity