CODEWITHSUNDEEP
asp.netformattingmschartaxis-labels
Cheshire Cat
Cheshire Cat

Reputation: 1961

ASP.NET Chart control set month names from int value on X Axis labels

I want to replace numbers (1, 2, 3, ...) on the X Axis of the chart with the corresponding month name.

This is my actual chart:

Actual chart

On the DataView that populates the Series I have the "MONTH" column that contains values from 1 to 12. I also had to manually set the Minimum and Maximum value to 0 and 13, otherwise I lose the first and last column because of a lack of space between the beginning of the first X Axis column and the Y Axis and between the last X Axis column end of Chart area.

<ChartAreas>
    <asp:ChartArea Name="ChartArea1">
        <AxisX IsStartedFromZero="True" Title="Mese"
            TitleFont="Segoe UI, 10pt, style=Bold" IsLabelAutoFit="False" LineColor="Gray"
            Minimum="0" Maximum="13">
            <MajorGrid LineColor="LightGray" />
            <LabelStyle Font="Segoe UI, 9pt" />
        </AxisX>
    </asp:ChartArea>
</ChartAreas>

So, if I replace the int values with month names I also need to remove the Min and Max parameters, but I want to keep the space like it is now.

I tried with some solutions suggested here and elsewhere but with no results. The easiest, most effective and immediate seemed to be this:

Chart1.ChartAreas[0].AxisX.LabelStyle.Format = "MMM";

but it doesn't work. Instead I get "MMM" string in place of the integer values.

Is it possible to intercept the DataBind event like on a GridView, to replace the integer values with month names?

Upvotes: 3

Views: 7924

Answers (1)

DasKr&#252;melmonster
DasKr&#252;melmonster

Reputation: 6060

I think you have to use custom labels. I used this and this.

The code behind:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebTest_1
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Chart1.Series[0].Points.AddXY(1, 83);
            Chart1.Series[0].Points.AddXY(2, 63);
            Chart1.Series[0].Points.AddXY(3, 53);
            Chart1.Series[0].Points.AddXY(4, 77);
            Chart1.Series[0].Points.AddXY(5, 46);
            Chart1.Series[0].Points.AddXY(6, 99);
            Chart1.Series[0].Points.AddXY(7, 72);
            Chart1.Series[0].Points.AddXY(8, 39);
            Chart1.Series[0].Points.AddXY(9, 42);
            Chart1.Series[0].Points.AddXY(10, 71);
            Chart1.Series[0].Points.AddXY(11, 58);
            Chart1.Series[0].Points.AddXY(12, 63);

            Chart1.Series[1].Points.AddXY(1 , 46);
            Chart1.Series[1].Points.AddXY(2 , 72);
            Chart1.Series[1].Points.AddXY(3 , 53);
            Chart1.Series[1].Points.AddXY(4 , 39);
            Chart1.Series[1].Points.AddXY(5 , 63);
            Chart1.Series[1].Points.AddXY(6 , 71);
            Chart1.Series[1].Points.AddXY(7 , 75);
            Chart1.Series[1].Points.AddXY(8 , 99);
            Chart1.Series[1].Points.AddXY(9 , 83);
            Chart1.Series[1].Points.AddXY(10, 63);
            Chart1.Series[1].Points.AddXY(11, 58);
            Chart1.Series[1].Points.AddXY(12, 42);
        }

        protected void Chart1_Customize(object sender, EventArgs e)
        {
            foreach (var lbl in Chart1.ChartAreas[0].AxisX.CustomLabels)
            {
                int monthNumber = int.Parse(lbl.Text);
                if (monthNumber >= 1 && monthNumber <= 12)
                    lbl.Text = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(monthNumber);
                else
                    lbl.Text = "";
            }
        }
    }
}

Output:

enter image description here

You need to assign the Customize event.

Upvotes: 7

Related Questions