How to format y-axis numbers as thousands or millions in Blazor Chart?

This article explains how to format y-axis numbers into thousands or millions in Blazor Chart Component.

Formatting Y axis labels into Thousands or Millions in Blazor Chart

Blazor Chart provides us support to format axis label using OnAxisLabelRender event. This event triggers before each axis label is rendered.

The following properties are available in the AxisLabelRenderEventArgs.

• LabelStyle - Specifies the font information of the axis label.
• Text - Specifies the text to be displayed in the axis label.
• Value - Specifies the value of the axis label.

A method named LabelRender is bound to the OnAxisLabelRender event. This event is called for each axis label. In the LabelRender method, Y-axis labels are converted to millions format and then bound to the event argument text.

The following code example demonstrates this.

Index.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Sales Comparison">

    <ChartPrimaryXAxis IntervalType="IntervalType.Years" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelPlacement="LabelPlacement.BetweenTicks"/>

    <ChartEvents OnAxisLabelRender="@LabelRender"></ChartEvents>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>

</SfChart>

@code {

    public class ChartData
    {
        public DateTime X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
    {
          new ChartData{ X = new DateTime(2005, 01, 01), Y= 7000000 },
          new ChartData{ X = new DateTime(2006, 01, 01), Y= 5000000 },
          new ChartData{ X = new DateTime(2007, 01, 01), Y= 3000000 },
          new ChartData{ X = new DateTime(2008, 01, 01), Y= 4000000 },
          new ChartData{ X = new DateTime(2009, 01, 01), Y= 8000000 },
          new ChartData{ X = new DateTime(2010, 01, 01), Y= 5000000 },
          new ChartData{ X = new DateTime(2011, 01, 01), Y= 7300000 },
          new ChartData{ X = new DateTime(2012, 01, 01), Y= 9000000 },           
    };

    public void LabelRender(AxisLabelRenderEventArgs args)
    {
        if(args.Axis.Name == "PrimaryYAxis")
        {
            double temp = Convert.ToDouble(args.Text);
            args.Text = (temp / 1000000).ToString() + "M";
        }
    }
}

The following image screenshot illustrates the output of the above code snippet.

Output:

View the sample in GitHub

Conclusion

I hope you enjoyed learning how to format y-axis label into thousands and millions in Blazor Chart Component.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!