Axis Customization in Blazor Sparkline component
You can customize axis value types and min and max values of the Sparkline Charts.
Change value type of the Sparkline Charts
You can change the Sparkline Charts value type by setting the ValueType property to Numeric, Category, or DateTime.
Category
You can assign category values to the Sparkline Charts by setting ValueType to Category.
@using Syncfusion.Blazor.Charts
<SfSparkline XName="EmployeeName"
YName="WorkHours"
TValue="WorkDetails"
DataSource='EmployeeWorkReport'
Type="SparklineType.Column"
ValueType="SparklineValueType.Category"
Height="150px"
Width="130px">
</SfSparkline>
@code {
public class WorkDetails
{
public string EmployeeName;
public double WorkHours;
};
private List<WorkDetails> EmployeeWorkReport = new List<WorkDetails> {
new WorkDetails { EmployeeName = "Robert", WorkHours= 60 },
new WorkDetails { EmployeeName = "Andrew", WorkHours= 65 },
new WorkDetails { EmployeeName = "Suyama", WorkHours= 70 },
new WorkDetails { EmployeeName = "Michael", WorkHours= 80 },
new WorkDetails { EmployeeName = "Janet", WorkHours= 55 },
new WorkDetails { EmployeeName = "Davolio", WorkHours= 90 },
new WorkDetails { EmployeeName = "Fuller", WorkHours= 75 },
new WorkDetails { EmployeeName = "Nancy", WorkHours= 85 }
};
}
Numeric
You can assign numeric values to the Sparkline Charts by setting ValueType to Numeric
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="ExpenditureReport"
TValue="ExpenditureDetails"
XName="Year"
YName="Expense"
Type="SparklineType.Column"
ValueType="SparklineValueType.Numeric"
Height="150px"
Width="130px">
</SfSparkline>
@code {
public class ExpenditureDetails
{
public int Year;
public int Expense;
};
private List<ExpenditureDetails> ExpenditureReport = new List<ExpenditureDetails> {
new ExpenditureDetails{ Year= 2010, Expense= 190 },
new ExpenditureDetails{ Year= 2011, Expense= 165 },
new ExpenditureDetails{ Year= 2012, Expense= 158 },
new ExpenditureDetails{ Year= 2013, Expense= 175 },
new ExpenditureDetails{ Year= 2014, Expense= 200 },
new ExpenditureDetails{ Year= 2015, Expense= 180 },
new ExpenditureDetails{ Year= 2016, Expense= 210 }
};
}
Change min and max values of axis
You can change the min and max values of x-axis by setting the MinX and MaxX values to the SparklineAxisSettings tag.
You can also change the min and max values of y-axis by setting the MinY and MaxY values to the SparklineAxisSettings tag.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="ExpenditureReport"
TValue="ExpenditureDetails"
XName="Year"
YName="Expense"
Type="SparklineType.Column"
ValueType="SparklineValueType.Numeric"
Height="150px"
Width="130px">
<SparklineAxisSettings MinY="100" MaxY="220"></SparklineAxisSettings>
</SfSparkline>Refer code block to know the property value of
ExpenditureReport.
Change value of axis
You can set horizontal axis line value of the Sparkline Charts by setting Value to the SparklineAxisSettings tag. The following code example demonstrates this.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="ExpenditureReport"
TValue="ExpenditureDetails"
XName="Year"
YName="Expense"
Type="SparklineType.Column"
Height="150px"
Width="130px">
<SparklineAxisSettings Value="170"></SparklineAxisSettings>
</SfSparkline>Refer code block to know the property value of
ExpenditureReport.
Axis line customization
Axis of the Sparkline Charts can be collapsed using the Visible property in LineSettings; this is not applicable for win-loss type.
You can customize the Color, Width, Opacity, and DashArray of axis line.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="ExpenditureReport"
TValue="ExpenditureDetails"
XName="Year"
YName="Expense"
Type="SparklineType.Line"
Height="150px"
Width="130px">
<SparklineAxisSettings>
<SparklineAxisLineSettings Visible="true" Color="#ff14ae" DashArray="5"></SparklineAxisLineSettings>
</SparklineAxisSettings>
</SfSparkline>Refer code block to know the property value of
ExpenditureReport.
