Axis Customization in Blazor Sparkline component
Change the value type of the Sparkline Chart
The ValueType property is used to specify the Sparkline value type, which can be Numeric, Category, or DateTime.
Numeric
The numeric axis value can be provided by specifying the ValueType property to the Numeric.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Column" ValueType="SparklineValueType.Numeric" Height="250px" Width="450px">
</SfSparkline>
@code {
public class ExpenditureDetails
{
public int Year { get; set; }
public int Expense { get; set; }
};
public 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 }
};
}
Category
The category axis value can be provided by specifying the ValueType property to the Category.
@using Syncfusion.Blazor.Charts
<SfSparkline XName="EmployeeName"YName="WorkHours"TValue="WorkDetails"DataSource="@EmployeeWorkReport" Type="SparklineType.Column"ValueType="SparklineValueType.Category" Height="250px"Width="450px">
</SfSparkline>
@code {
public class WorkDetails
{
public string EmployeeName { get; set; }
public double WorkHours { get; set; }
};
public 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 }
};
}
DateTime
The DateTime axis value can be provide by specifying the ValueType property to the DateTime.
@using Syncfusion.Blazor.Charts
<SfSparkline XName="Date" YName="Expense" TValue="ExpenditureDetail" DataSource="@ExpenditureReports" Type="SparklineType.Column" ValueType="SparklineValueType.DateTime" Height="250px" Width="450px">
</SfSparkline>
@code {
public class ExpenditureDetail
{
public DateTime Date { get; set; }
public double Expense { get; set; }
}
public List<ExpenditureDetail> ExpenditureReports = new List<ExpenditureDetail>
{
new ExpenditureDetail { Date = new DateTime(2005, 01, 01), Expense = 21 },
new ExpenditureDetail { Date = new DateTime(2006, 01, 01), Expense = 24 },
new ExpenditureDetail { Date = new DateTime(2007, 01, 01), Expense = 36 },
new ExpenditureDetail { Date = new DateTime(2008, 01, 01), Expense = 38 },
new ExpenditureDetail { Date = new DateTime(2009, 01, 01), Expense = 54 },
new ExpenditureDetail { Date = new DateTime(2010, 01, 01), Expense = 57 },
new ExpenditureDetail { Date = new DateTime(2011, 01, 01), Expense = 70 }
};
}
Change the min and the max values of axis
The min and the max values of the X-axis can be customized using the MinX and the MaxX properties of the SparklineAxisSettings, and the min and the max values of the Y-axis using the MinY and the MaxY properties.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Column" ValueType="SparklineValueType.Numeric" Height="250px" Width="450px">
<SparklineAxisSettings MinY="100" MaxY="220"></SparklineAxisSettings>
</SfSparkline>Refer to the code block to know about the property value of the ExpenditureReport.
Change value of axis
The horizontal axis line value can be customized by setting the Value in the SparklineAxisSettings.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Column" ValueType="SparklineValueType.Numeric" Height="250px" Width="450px">
<SparklineAxisSettings Value="170"></SparklineAxisSettings>
</SfSparkline>Refer to the code block to know about the property value of the ExpenditureReport.
Axis Line Customization
The axis line can be enabled by specifying the Visible property true in the SparklineAxisLineSettings.
The axis line is not applicable for the
WinLosschart type.
The axis line can be customized using the following properties.
Color- Specifies the color of the axis line.Opacity- Specifies the opacity for theColorof the axis line.Width- Specifies the width of the axis line.DashArray- Specifies the dash array of the axis line.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Line" Height="250px" Width="450px">
<SparklineAxisSettings>
<SparklineAxisLineSettings Visible="true" Color="#ff14ae" DashArray="5" Opacity="1"></SparklineAxisLineSettings>
</SparklineAxisSettings>
</SfSparkline>Refer to the code block to know about the property value of ExpenditureReport.
