Devexpress MVC Chart Axis label to format number by M (million) or K (thousand)

Often it is enough to show on chart axis label general indicative number instead of full precision figure. Also long figures take a lot of precious space.

So instead 890 152 000 the  890M would do fine. So how to do it in case of DevExpress Chart control MVC extension. Unlike in case of Windows Desktop or WinForms control it is a bit harded to figure out as the handy properties editor is not available.

But actually the solution is quite simple. Key is to implement CustomDrawAxisLabel event.

Inside event use Custom Numeric Format Strings functionality. Particularly the “,” custom specifier is key ( The “,” Custom Specifier ).

For k use “{0:#,k}” and for M use “{0:#,,M}” format

@Html.DevExpress().Chart(settings => {
    settings.Name = "VolumeChart";

    settings.BorderOptions.Visibility = DefaultBoolean.False;
    settings.Height = 370;
    settings.Width = 370;

    settings.Legend.Visibility = DefaultBoolean.False;

    settings.CustomDrawAxisLabel += (s, e) =>
    {
        var args = (CustomDrawAxisLabelEventArgs)e;
        AxisBase axis = args.Item.Axis;
        if (axis is AxisY)
        {
            args.Item.Text = string.Format("{0:#,,M}", (double)args.Item.AxisValue);
        }
        if (axis is AxisX)
        {
            args.Item.Text = ((DateTime)args.Item.AxisValue).ToString("MM.yyyy");
        }
    };

    settings.Series.Add(s =>
    {

        s.Name = "Trade Volume";
        s.ArgumentDataMember = "Date";
        s.ValueDataMembers[0] = "Volume";
        s.LabelsVisibility = DefaultBoolean.False;


        s.Views().LineSeriesView(v =>
        {
            v.LineMarkerOptions.Visible = false;

        });
    });

    settings.XYDiagram(d =>
    {
        d.AxisX.DateTimeScaleOptions.MeasureUnit = DateTimeMeasureUnit.Day;
        d.AxisX.DateTimeScaleOptions.GridAlignment = DateTimeGridAlignment.Month;
        d.AxisX.DateTimeScaleOptions.GridSpacing = 1;
        d.AxisX.GridLines.Visible = true;
        d.AxisX.Interlaced = true;
        d.AxisY.WholeRange.AlwaysShowZeroLevel = false;
    });

}).Bind(Model).GetHtml()

This code also shows how to set axis measure unit and grid alignment.