MS Chart Control: Formatting Axis Labels

Question

I have questions about formatting the axis labels of the MS ASP.NET chart control. Before I dive into my questions, please take a look at this screenshot.

As you can see in the screenshot, the axis labels are hard to read and appear to be bolded. Now, my questions are:

• Which default chart properties cause the axis labels to not look like Arial 11px regular, i.e. bolding and close characters?
• How can the appearance of the axis labels be easier to read and cleaned up, i.e. regular font weight and separation between characters?

The responsible code is:

public Chart GetChart(ChartData chartDataData, IChartSettings settings)
{
    var chart = new Chart
    {
        BackColor = Color.Transparent,
        Height = settings.Height,
        Palette = ChartColorPalette.None,
        PaletteCustomColors = settings.PaletterCustomColors.ToArray(),
        Width = settings.Width
    };
    if (settings.ShowLegend)
    {
        chart.Legends.Add("Legend").Alignment = StringAlignment.Center;
    }
    AddChartArea(chart);

    foreach (var seriesData in chartDataData.Series)
    {
        AddSeries(chart, seriesData, settings.ChartType);
    }

    chart.AlignDataPointsByAxisLabel();
    return chart;
}

private void AddChartArea(Chart chart)
{
    var area = new ChartArea();
    area.AxisX.LabelStyle.Angle = -45;
    area.AxisX.MajorGrid.LineColor = Color.Transparent;
    chart.ChartAreas.Add(area);
    area.AxisX.LabelStyle.Font = area.AxisY.LabelStyle.Font = new Font("Arial", 11, GraphicsUnit.Pixel);
}

private void AddSeries(Chart chart, SeriesData data, SeriesChartType chartType)
{
    var series = new Series
    {
        ChartType = chartType,
        Name = data.Name,
        ToolTip = data.Name,
        Url = data.Url
    };

    foreach (var pointData in data.Points)
    {
        AddPoint(series, pointData.XValue, pointData.YValue);
    }
    chart.Series.Add(series);
}

private void AddPoint(Series series, string xValue, float yValue)
{
    var point = new DataPoint
    {
        AxisLabel = xValue
    };
    point.SetValueXY(xValue, yValue);
    series.Points.Add(point);
}

where the code for the settings object is:

public static ChartSettings TaskSummary = new ChartSettings
{
    ChartType = SeriesChartType.StackedColumn,
    Height = Unit.Pixel(300),
    Width = Unit.Pixel(450),
    PaletterCustomColors = new[]
    {
        Color.FromArgb(191, 214, 151),
        Color.FromArgb(249, 255, 149),
        Color.FromArgb(191, 79, 75),
        Color.Green
    },
    ShowLegend = true
};

Thanks for the help.

Solution

If you set BackColor of the chart to Color.Transparent, You need to set AntiAliasing="Graphics".

Comments

[scrat.squirrel]

Did you try area.AxisX.LabelStyle.Font.Bold = false? Also, play with the font size, i.e. change it to 12 and see how does it draw then...

[KFL]

Could you reference the documentation and explain why it works?

[KFL]

The best explanation for this fix I can find is in here. Quoted: "The issue lies 'deep' in the GDI+ used by the chart control... When you draw text in the image with transparent backgroundand you are using text anti-aliasing, GDI+ uses Black color as a default background to calculate anti-aliasing affect. You can either set solid color as a background or you can turn off text anti-aliasing using Chart.AntiAliasing=AntiAliasingStyles.Graphics;"