An axis can be positioned in the chart area using CrossesAt
and CrossesInAxis
properties. The CrossesAt
property specifies the values (datetime, numeric, or logarithmic) at which the axis line has to be intersected with the vertical axis or vice-versa, and the CrossesInAxis
property specifies the axis name with which the axis line has to be crossed.
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" CrossesAt="15"/>
<ChartPrimaryYAxis CrossesAt="5"/>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column"/>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 26 },
new ChartData { X= "AUS", YValue= 26 },
new ChartData { X= "IND", YValue= 26 },
new ChartData { X= "DEN", YValue= 26 },
new ChartData { X= "MEX", YValue= 26 },
};
}
You can add a title to the axis using Title
property to provide quick
information to the user about the data plotted in the axis. Title text can be customized using TitleStyle
property of the axis.
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis Title="Countries" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
<ChartAxisTitleStyle Size="16px" Color="red" FontFamily="Segoe UI" FontWeight="bold"/>
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column"/>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 26 },
new ChartData { X= "AUS", YValue= 26 },
new ChartData { X= "IND", YValue= 26 },
new ChartData { X= "DEN", YValue= 26 },
new ChartData { X= "MEX", YValue= 26 },
};
}
You can customize the width, color and size of the minor and major tick lines, using
MajorTickLines
and
MinorTickLines
properties in the axis.
@using Syncfusion.Blazor.Charts
<SfChart Title="Sales History of Product X">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" MinorTicksPerInterval="2">
<ChartAxisMajorTickLines Width="5" Color="blue"/>
<ChartAxisMinorTickLines Width="1" Color="red"/>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Profit($)" MinorTicksPerInterval="1">
<ChartAxisMajorTickLines Width="5" Color="blue"/>
<ChartAxisMinorTickLines Width="1" Color="red"/>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesData" XName="X" YName="YValue" Type="ChartSeriesType.Column"/>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> SalesData = new List<ChartData>
{
new ChartData { X= "John", YValue= 10000 },
new ChartData { X= "Jake", YValue= 12000 },
new ChartData { X= "Peter", YValue= 18000 },
new ChartData { X= "James", YValue= 11000 }
};
}
You can customize the width, color and dasharray of the minor and major grid lines, using MajorGridLines
and MinorGridLines
properties in the axis.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" MinorTicksPerInterval="2">
<ChartAxisMajorGridLines Width="5" Color="blue"/>
<ChartAxisMinorGridLines Width="0.5" Color="red"/>
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column"/>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 23 },
new ChartData { X= "AUS", YValue= 16 },
new ChartData { X= "IND", YValue= 36 },
new ChartData { X= "DEN", YValue= 12 },
new ChartData { X= "MEX", YValue= 20 },
};
}
In addition to primary X and Y axis, we can add n number of axis to the chart. Series can be associated with this axis, by mapping with axis unique name. See also
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
<ChartAxes>
<ChartAxis Name="YAxis" OpposedPosition="true"/>
</ChartAxes>
<ChartSeriesCollection>
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis"/>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double Y { get; set; }
public double Y1 { get; set; }
}
public List<ChartData> WeatherReports = new List<ChartData>
{
new ChartData { X = "Sun", Y = 35, Y1 = 30 },
new ChartData { X = "Mon", Y = 40, Y1 = 28 },
new ChartData { X = "Tue", Y = 80, Y1 = 29 },
new ChartData { X = "Wed", Y = 70, Y1 = 30 },
new ChartData { X = "Thu", Y = 65, Y1 = 33 },
new ChartData { X = "Fri", Y = 55, Y1 = 32 },
new ChartData { X = "Sat", Y = 50, Y1 = 34 }
};
}
When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To inverse the axis set this property
IsInversed
to true.
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis IsInversed="true" />
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double Y { get; set; }
}
public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X = "Sun", Y = 35 },
new ChartData { X = "Mon", Y = 40 },
new ChartData { X = "Tue", Y = 80 },
new ChartData { X = "Wed", Y = 70 },
new ChartData { X = "Thu", Y = 65 },
new ChartData { X = "Fri", Y = 55 },
new ChartData { X = "Sat", Y = 50 }
};
}
To place an axis opposite from its original position,
set OpposedPosition
property of the axis to true.
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
<ChartPrimaryYAxis OpposedPosition="true"/>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double Y { get; set; }
}
public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X = "Sun", Y = 35 },
new ChartData { X = "Mon", Y = 40 },
new ChartData { X = "Tue", Y = 80 },
new ChartData { X = "Wed", Y = 70 },
new ChartData { X = "Thu", Y = 65 },
new ChartData { X = "Fri", Y = 55 },
new ChartData { X = "Sat", Y = 50 }
};
}
Note: You can refer to our
Blazor Charts
feature tour page for its groundbreaking feature representations. You can also explore ourBlazor Chart example
to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.