MSChart line chart label overlapping

Question

i have this problem... the point's label do this:

enter image description here

the chart must appear prettiest possible, the X Axis of the series will grow up always, but I'm afraid that if it gets more points it'll look uglier.

the chart has 11 points in the image, i tried to scale the X axis to 5 but nothing.

Any advice?

CheGueVerra CheGueVerra · Accepted Answer · 2015-06-01T17:05:20

Try adding smart labels to your series, this will allow you to set some rules so that the display of the point labels without overlapping

chart1.Series["Default"].SmartLabelStyle.Enabled = true;
chart1.Series["Default"].SmartLabelStyle.AllowOutsidePlotArea = LabelOutsidePlotAreaStyle.Partial;
chart1.Series["Default"].SmartLabelStyle.CalloutLineAnchorCap = LineAnchorCapStyle.Diamond;
chart1.Series["Default"].SmartLabelStyle.CalloutLineColor = Color.Red;
chart1.Series["Default"].SmartLabelStyle.CalloutLineWidth = 2;
chart1.Series["Default"].SmartLabelStyle.CalloutStyle = LabelCalloutStyle.Box;

If that doesn't produce the effect you want, then your next option will be using custom labels

//IMPORTANT: For this event to work the event handler must be added to the InitializeComponent()
//  method. We recommend that you add the event using the Properties window in the IDE   
private void Chart1_Customize(System.Web.UI.DataVisualization.Charting.Chart sender)
{
    // Get X and Y axis labels collections
    CustomLabelsCollection xAxisLabels = Chart1.ChartAreas["ChartArea1"].AxisX.CustomLabels;
    CustomLabelsCollection yAxisLabels = Chart1.ChartAreas["ChartArea1"].AxisY.CustomLabels;

    // Change text of the first Y axis label
    yAxisLabels[0].Text = "Zero";

    // Change Y axis labels
    for(int labelIndex = 1; labelIndex < yAxisLabels.Count; labelIndex++)
    {
        yAxisLabels[labelIndex].Text = yAxisLabels[labelIndex].Text + "�. 00'";
    }

    // Remove each second X axis label
    for(int labelIndex = 0; labelIndex < xAxisLabels.Count; labelIndex++)
    {
        // Adjust position of the previous label
        if(labelIndex > 0)
        {
            xAxisLabels[labelIndex - 1].ToPosition += 
                (xAxisLabels[labelIndex].ToPosition - xAxisLabels[labelIndex].FromPosition) / 2.0;
            xAxisLabels[labelIndex - 1].FromPosition -= 
                (xAxisLabels[labelIndex].ToPosition - xAxisLabels[labelIndex].FromPosition) / 2.0;
        }

        // Remove label
        xAxisLabels.RemoveAt(labelIndex);
    }
}

For more help with MS Chart, I strongly recommend that you download the working sample project here, it contains sample code on how to use the different parts of MS Chart, the code given here is from that sample project.

MSChart line chart label overlapping

1 Answers