Nick Nick - 1 year ago 115
C# Question

MVC System.Web.Helpers Doughnut chart label positioning

I have a MVC app which I'm trying to display a Doughnut chart on. Its working perfectly using the below code, except I cannot find a way to get the chart labels to display outside of the chart

private static void CreateChart(int width, int height, ArrayList xData, ArrayList yData, string title = "")
{
string myTheme = @"<Chart BackColor=""Transparent"" AntiAliasing=""All"" >
<ChartAreas>
<ChartArea Name=""Default"" BackColor=""Transparent"">
<AxisY>
<LabelStyle ForeColor=""#ffffff"" Font=""Helvetica Neue, 20 px"" />
</AxisY>
</ChartArea>
</ChartAreas>
<Legends>
<Legend _Template_=""All"" BackColor=""Transparent"" Font=""Trebuchet MS, 18.25pt, style=Bold"" IsTextAutoFit=""False"" />
</Legends>
</Chart>";

new System.Web.Helpers.Chart(width: width, height: height, theme: myTheme)
.AddSeries("Default", chartType: "Doughnut", xValue: xData, yValues: yData)
.AddTitle(title)
.Write("png");
}


ChartLabelIssue

As you can see from my code, I am theming the chart using XML, but I have not found anything that looks like it might help with the positioning of labels.

It's not that much of an issue on the above chart, but when displaying more than 2 fields, the labels all overlap:

ChartOverlappingLables

Does anyone know how to change the position of the labels? Also bonus points for why the chart titles are appearing all fuzzy? :)

Answer Source

Use custom property PieLabelStyle to avoid overlapping. As for the fuzzy title, there's just too much garbage in your theme. Clean it up. See below:

string myTheme = @"<Chart>
                <ChartAreas>
                    <ChartArea Name=""Default"">
                    </ChartArea>
                </ChartAreas>
                <Series>
                    <Series Name=""Default"" CustomProperties=""PieLabelStyle = Outside"" Label=""Very very long label (#VAL)""></Series>
                </Series>
                <Titles>
                    <Title Name=""Default""></Title>
                </Titles>
            </Chart>";

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download