Appearance in Blazor Stock Chart Component
30 Nov 20224 minutes to read
Stock Chart Title
Stock Chart can be given a title using Title property, to show the information about the data plotted.
@using Syncfusion.Blazor.Charts
<SfStockChart Title="AAPL Stock Price">
<StockChartSeriesCollection>
<StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Line" XName="XValue" YName="YValue"></StockChartSeries>
</StockChartSeriesCollection>
<StockChartPeriods>
<StockChartPeriod Text="1Y"></StockChartPeriod>
<StockChartPeriod Text="All" Selected="true"></StockChartPeriod>
</StockChartPeriods>
</SfStockChart>
@code {
public class ChartData
{
public DateTime XValue {get; set;}
public double YValue {get; set;}
}
public List<ChartData> DataSource = new List<ChartData>
{
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21 },
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24 },
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36 },
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
};
}
Title Customizations
The TextStyle property of chart title provides options to customize the Size, Color, FontFamily, FontWeight, FontStyle, Opacity, TextAlignment and TextOverflow.
@using Syncfusion.Blazor.Charts
<SfStockChart Title="AAPL Stock Price">
<StockChartTitleStyle FontFamily="Arial" FontStyle="Italic" FontWeight="Regular" Color="#E27F2D" Size="20px" TextOverflow="TextOverflow.Wrap"></StockChartTitleStyle>
<StockChartSeriesCollection>
<StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Line" XName="XValue" YName="YValue"></StockChartSeries>
</StockChartSeriesCollection>
<StockChartPeriods>
<StockChartPeriod Text="1Y"></StockChartPeriod>
<StockChartPeriod Text="All" Selected="true"></StockChartPeriod>
</StockChartPeriods>
</SfStockChart>
@code {
public class ChartData
{
public DateTime XValue {get; set;}
public double YValue {get; set;}
}
public List<ChartData> DataSource = new List<ChartData>
{
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21 },
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24 },
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36 },
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
};
}
Stock Chart Theme
Changing theme will affect background color, gridlines, tooltip colors and appearance.
Stock chart is shipped with several built-in themes such as Material, Fabric, Bootstrap , HighContrastLight, MaterialDark, FabricDark, FabricDark, HighContrast and BootstrapDark.
@using Syncfusion.Blazor.Charts
<SfStockChart Title="AAPL Stock Price" Theme="Theme.HighContrast">
<StockChartSeriesCollection>
<StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Line" XName="XValue" YName="YValue"></StockChartSeries>
</StockChartSeriesCollection>
<StockChartPeriods>
<StockChartPeriod Text="1Y"></StockChartPeriod>
<StockChartPeriod Text="All" Selected="true"></StockChartPeriod>
</StockChartPeriods>
</SfStockChart>
@code {
public class ChartData
{
public DateTime XValue {get; set;}
public double YValue {get; set;}
}
public List<ChartData> DataSource = new List<ChartData>
{
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21 },
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24 },
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36 },
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
};
}