To render a line series, use series Type
as Line
.
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals" Width="60%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Line">
</ChartSeries>
</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= "South Korea", Y= 39.4 },
new ChartData { X= "India", Y= 61.3 },
new ChartData { X= "Pakistan", Y= 20.4 },
new ChartData { X= "Germany", Y= 65.1 },
new ChartData { X= "Australia", Y= 15.8 },
new ChartData { X= "Italy", Y= 29.2 },
new ChartData { X= "United Kingdom", Y= 44.6 },
new ChartData { X= "Saudi Arabia", Y= 9.7 },
new ChartData { X= "Russia", Y= 40.8 },
new ChartData { X= "Mexico", Y= 31 },
new ChartData { X= "Brazil", Y= 75.9 },
new ChartData { X= "China", Y= 51.4 }
};
}
To render a multicolored line series, use the series type as MultiColoredLine
.
Here, the individual colors to the data can be mapped by using PointColorMapping
.
@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" PointColorMapping="Color" Type="ChartSeriesType.MultiColoredLine">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double Y { get; set; }
public string Color { get; set; }
}
public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "South Korea", Y= 39.4, Color="red" },
new ChartData { X= "India", Y= 61.3, Color="green" },
new ChartData { X= "Pakistan", Y= 20.4, Color="#ff0097" },
new ChartData { X= "Germany", Y= 65.1, Color="crimson" },
new ChartData { X= "Australia", Y= 15.8, Color="blue" },
new ChartData { X= "Italy", Y= 29.2, Color="darkorange" },
};
}
You can use the following properties to customize the line series.
Fill
– used to change the color of the line.Width
– used to change the width of the line.Opacity
– used to control the transparency of the chart series.DashArray
– used to render line series with dashes.@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals" Width="60%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Width="3" Opacity="0.5"
DashArray="5,5" Fill="blue" Type="ChartSeriesType.Line">
</ChartSeries>
</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= "South Korea", Y= 39.4 },
new ChartData { X= "India", Y= 61.3 },
new ChartData { X= "Pakistan", Y= 20.4 },
new ChartData { X= "Germany", Y= 65.1 },
new ChartData { X= "Australia", Y= 15.8 },
new ChartData { X= "Italy", Y= 29.2 },
new ChartData { X= "United Kingdom", Y= 44.6 },
new ChartData { X= "Saudi Arabia", Y= 9.7 },
new ChartData { X= "Russia", Y= 40.8 },
new ChartData { X= "Mexico", Y= 31 },
new ChartData { X= "Brazil", Y= 75.9 },
new ChartData { X= "China", Y= 51.4 }
};
}