We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
@using System.Collections.ObjectModel;
<button type="button" class="btn btn-primary" @onclick="AddNewChartData">Add New ChartData</button>
<EjsChart>
<ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@DataSource" XName="X" YName="Y" Type="ChartSeriesType.Column" PointColorMapping="Color"></ChartSeries>
</ChartSeriesCollection>
</EjsChart>
@code {
public ObservableCollection<ChartData> DataSource { get; set; }
public class ChartData
{
public string X { get; set; }
public double Y { get; set; }
public string Color { get; set; }
public static ObservableCollection<ChartData> GetData()
{
ObservableCollection<ChartData> DataSource = new ObservableCollection<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" },
};
return DataSource;
}
}
protected override void OnInitialized()
{
this.DataSource = ChartData.GetData();
}
public void AddNewChartData()
{
this.DataSource.Add(new ChartData { X = "Italy", Y = 29.2, Color = "darkorange" });
}
} |
|
Initial Rendering |
After Button Click |
 |
 |
