How to select appropriate axis for different data types in Blazor Charts?

This article explains how to select the appropriate axes for different data types in Blazor Charts.

Supported Data Types for Chart Axes:

Blazor Charts offers the flexibility to render charts using different data types, each paired with the suitable axis type.

Supported Data Types:

1. Strings
2. Numeric data types (e.g., int, float, double)
3. DateTime (including DateOnly, TimeOnly)

Axis Types and Their Supported Data:

• Numeric Axis - This can be used to represent numeric values in a chart. The ValueType of an axis is Double by default.
• Category Axis - This can be used to represent string values instead of integers for the axis.
• DateTime Axis - This uses a date time scale and displays date time values as axis labels in the format specified.
• DateTime Category Axis - This is used to display date-time values with non-linear intervals.
• Logarithmic Axis - This is used to visualize data containing numeric values spanning both lower (e.g., 10^-6) and upper (e.g., 10^6) orders of magnitude.

To render charts accurately with the respective data types, it is essential to set the appropriate axis types in the ValueType property of the ChartAxis.

Supported axis types for X-axis of the chart:

In Blazor Charts, all the above axis types are supported for the x-axis of the chart to represent different kinds of data types. The ValueType of the x-axis is Double by default.

The code example below demonstrates how to render the chart for string data type using a category axis:

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string Country { get; set; }
        public double Medals { get; set; }
    }

    public List<CategoryData> MedalDetails = new List<CategoryData>
    {
        new CategoryData { Country = "USA", Medals = 46 },
        new CategoryData { Country = "GBR", Medals = 27 },
        new CategoryData { Country = "CHN", Medals = 26 },
        new CategoryData { Country = "UK", Medals = 23 },
        new CategoryData { Country = "AUS", Medals = 16 },
        new CategoryData { Country = "IND", Medals = 36 },
        new CategoryData { Country = "DEN", Medals = 12 },
        new CategoryData { Country = "MEX", Medals = 20 },
    };
}

The following screenshot illustrates the output of the code snippet.

Output:

Live Sample for Category X-Axis

The code example below demonstrates how to render the chart for datetime values using the DateTime axis type.

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
   </ChartPrimaryXAxis>

   <ChartSeriesCollection>
       <ChartSeries DataSource="@WeatherReports" XName="Date" YName="Temperature" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code{
   public class DateTimeData
   {
       public DateTime Date { get; set;}
       public double Temperature {get; set;}
   }
   
   public List<DateTimeData> WeatherReports = new List<DateTimeData>
   {
   	new DateTimeData { Date = new DateTime(2005, 01, 01), Temperature = 21 },
   	new DateTimeData { Date = new DateTime(2006, 01, 01), Temperature = 24 },
   	new DateTimeData { Date = new DateTime(2007, 01, 01), Temperature = 36 },
   	new DateTimeData { Date = new DateTime(2008, 01, 01), Temperature = 38 },
   };
} 

The following screenshot illustrates the output of the code snippet.

Output:

Live Sample for DateTime X-Axis

The code example below demonstrates how to render the chart for datetime values using the DateTimeCategory axis type.

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartPrimaryXAxis Format="d MMM yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory">
   </ChartPrimaryXAxis>

   <ChartSeriesCollection>
       <ChartSeries DataSource="@WeatherReports" XName="Date" YName="Temperature" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code{
   public class DateTimeCategoryData
   {
       public DateTime Date { get; set;}
       public double Temperature {get; set;}
   }
   
   public List<DateTimeCategoryData> WeatherReports = new List<DateTimeCategoryData>
   {
   	new DateTimeCategoryData { Date = new DateTime(2005, 01, 01), Temperature = 21 },
   	new DateTimeCategoryData { Date = new DateTime(2006, 01, 01), Temperature = 24 },
   	new DateTimeCategoryData { Date = new DateTime(2007, 01, 01), Temperature = 36 },
   	new DateTimeCategoryData { Date = new DateTime(2008, 01, 01), Temperature = 38 },
   };
} 

The following screenshot illustrates the output of the code snippet.

Output:

Live Sample for DateTimeCategory X-Axis

Supported Axis Types for Y-axis of the Chart:

In Blazor Charts, only the numeric and logarithmic axis types are supported for the y-axis of the chart to represent numeric data type values. Similar to the x-axis of the chart, the ValueType of the y-axis is also Double by default.

The code example below demonstrates how to render the chart for numeric values using the default Double axis type:

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@ScoreDetails" XName="Over" YName="Score" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code{
   public class NumericData
   {
       public double Over { get; set; }
       public double Score { get; set; }
   }

   public List<NumericData> ScoreDetails = new List<NumericData>
   {
   	new NumericData { Over = 1, Score = 21 },
   	new NumericData { Over = 2, Score = 24 },
   	new NumericData { Over = 3, Score = 36 },
   	new NumericData { Over = 4, Score = 38 },
   	new NumericData { Over = 5, Score = 54 },
   	new NumericData { Over = 6, Score = 57 },
   	new NumericData { Over = 7, Score = 70 },
   };
} 

The following screenshot illustrates the output of the code snippet.

Output:

Live Sample for Numeric Y-Axis

The code example below demonstrates how to render the chart for numeric data type values containing spanning both lower and upper orders of magnitude using the Logarithmic axis type.

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartPrimaryXAxis Format="yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>    

   <ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic"/>    

   <ChartSeriesCollection>
       <ChartSeries DataSource="@ProfitInfo" XName="Period" YName="Profit" />        
   </ChartSeriesCollection>
</SfChart>

@code{
   public class LogarithmicData
   {
       public DateTime Period { get; set; }
       public double Profit { get; set; }
   }

   public List<LogarithmicData> ProfitInfo = new List<LogarithmicData> 
   {
   	new LogarithmicData { Period = new DateTime(2005, 01, 01), Profit = 100   },
   	new LogarithmicData { Period = new DateTime(2006, 01, 01), Profit = 200   },
   	new LogarithmicData { Period = new DateTime(2007, 01, 01), Profit = 500   },
   	new LogarithmicData { Period = new DateTime(2008, 01, 01), Profit = 1000  },
   	new LogarithmicData { Period = new DateTime(2009, 01, 01), Profit = 8000  },
   	new LogarithmicData { Period = new DateTime(2010, 01, 01), Profit = 90000 },
   	new LogarithmicData { Period = new DateTime(2011, 01, 01), Profit = 99000 },
   };
}

The following screenshot illustrates the output of the code snippet.

Output:

Live Sample for Logarithmic Y-Axis

Conclusion:

We hope you enjoyed learning how to select the appropriate axes for different data types in Blazor Charts.

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

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions 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!