MVC System.Web.Helpers Doughnut chart label positioning

Question

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

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:

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

Answer 1

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