Numeric Axis in Blazor Charts Component

4 Aug 202110 minutes to read

Numeric axis can be used to represent numeric values in a chart. The ValueType of an axis is Double by default.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Numeric Axis

Range and Interval

The axis range will be calculated automatically based on the provided data; however, the axis range can also be customized using Minimum, Maximum, and Interval properties.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis Minimum="5" Maximum="50" Interval="2"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Numeric Axis - Range

Range Padding

The RangePadding property can be used to apply padding to the minimum and maximum extremes of range. The following types of padding are supported by the numeric axis:

  • None
  • Round
  • Additional
  • Normal
  • Auto

Numeric - None

When the RangePadding is set to None, the minimum and maximum of an axis is based on the data.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryYAxis RangePadding="ChartRangePadding.None"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Range Padding - None

Numeric - Round

When the RangePadding is set to Round, the minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryYAxis RangePadding="ChartRangePadding.Round"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Range Padding - Round

Numeric - Additional

When the RangePadding is set to Additional, interval of an axis will be padded to the minimum and maximum of the axis.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryYAxis RangePadding="ChartRangePadding.Additional"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Range Padding - Additional

Numeric - Normal

When the RangePadding is set to Normal, padding is applied to the axis based on default range calculation.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryYAxis RangePadding="ChartRangePadding.Normal"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Range Padding - Normal

Numeric - Auto

When the RangePadding is set to Auto, horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryYAxis RangePadding="ChartRangePadding.Auto"/>
    <ChartPrimaryXAxis RangePadding="ChartRangePadding.Auto"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Range Padding - Auto

Label Format

Using the LabelFormat property on an axis, it is possible to format the numeric labels to all globalize formats.

@using Syncfusion.Blazor.Charts

<SfChart Title="Sales Comparison">
    <ChartPrimaryYAxis LabelFormat="c"/>    

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

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
	{
          new ChartData{ X= 10, Y=7000 },
          new ChartData{ X= 20, Y= 1000 },
          new ChartData{ X= 30, Y= 12000 },
          new ChartData{ X= 40, Y= 14000 },
          new ChartData{ X= 50, Y= 11000 },
          new ChartData{ X= 60, Y= 5000 },
          new ChartData{ X= 70, Y= 7300 },
          new ChartData{ X= 80, Y= 9000 },
          new ChartData{ X= 90, Y= 12000 },
          new ChartData{ X= 100, Y= 14000 },
          new ChartData{ X= 110, Y= 11000 },
          new ChartData{ X= 120, Y= 5000 }
    };
}

Numeric Axis - Label Format

The table below shows the results of applying various commonly used label formats to numeric data.

Label Value Label Format property value Result Description
1000 n1 1000.0 The number is rounded to 1 decimal place.
1000 n2 1000.00 The number is rounded to 2 decimal place.
1000 n3 1000.000 The number is rounded to 3 decimal place.
0.01 p1 1.0% The number is converted to percentage with 1 decimal place.
0.01 p2 1.00% The number is converted to percentage with 2 decimal place.
0.01 p3 1.000% The number is converted to percentage with 3 decimal place.
1000 c1 $1000.0 The currency symbol is appended to number and number is rounded to 1 decimal place.
1000 c2 $1000.00 The currency symbol is appended to number and number is rounded to 2 decimal place.

Custom Label Format

Axis also supports custom label format using placeholders such as {value}K, where the value represents the axis label, for example, 20K.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryYAxis LabelFormat="${value}K" RangePadding="ChartRangePadding.Auto"/>
    <ChartPrimaryXAxis RangePadding="ChartRangePadding.Auto"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }
    public List<ChartData> Data = new List<ChartData>
	{
		new ChartData { XValue = 10, YValue = 21 },
		new ChartData { XValue = 20, YValue = 24 },
		new ChartData { XValue = 30, YValue = 36 },
		new ChartData { XValue = 40, YValue = 38 },
		new ChartData { XValue = 50, YValue = 54 },
		new ChartData { XValue = 60, YValue = 57 },
		new ChartData { XValue = 70, YValue = 70 },
	};
}

Numeric Axis - Custom Label Format

Refer to our Blazor Charts feature tour page for its groundbreaking feature representations and also explore our Blazor Chart Example to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

See Also