@page "/" @using Syncfusion.Blazor.Charts @inject HttpClient Http <div class="control-section"> <SfChart Title="Inflation - Consumer Price" Theme="@Theme"> <ChartArea><ChartAreaBorder Width="0">ChartAreaBorder>ChartArea> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" > <ChartAxisMajorGridLines Width="0">ChartAxisMajorGridLines> ChartPrimaryXAxis> <ChartPrimaryYAxis LabelFormat="n9"> ChartPrimaryYAxis> <ChartTooltipSettings Enable="true">ChartTooltipSettings> <ChartSeriesCollection> <ChartSeries DataSource="@ChartData" Name="Germany" XName="Period" Width="2" Opacity="1" YName="ENG_InflationRate" Type="ChartSeriesType.Line"> <ChartMarker Visible="true" Width="10" Height="10"> ChartMarker> ChartSeries> ChartSeriesCollection> SfChart> div> @code{ private Theme Theme { get; set; } public List<LineChartData> ChartData = new List<LineChartData> { new LineChartData { Period = new DateTime(2005, 01, 01), ENG_InflationRate = 0.029894473441798297 }, new LineChartData { Period = new DateTime(2006, 01, 01), ENG_InflationRate = 0.0045423894914735641 }, new LineChartData { Period = new DateTime(2007, 01, 01), ENG_InflationRate = 0.0041773388914736476 }, new LineChartData { Period = new DateTime(2008, 01, 01), ENG_InflationRate = 0.029894473441798297 }, new LineChartData { Period = new DateTime(2009, 01, 01), ENG_InflationRate = 0.0039799665914737048 }, new LineChartData { Period = new DateTime(2010, 01, 01), ENG_InflationRate = 0.0071486530914737223 }, new LineChartData { Period = new DateTime(2011, 01, 01), ENG_InflationRate = 0.0046850518914736128 }, }; public class LineChartData { public DateTime Period { get; set; } public double ENG_InflationRate { get; set; } } }