Data Editing
14 Mar 20226 minutes to read
Enable Data Editing
It provides drag and drop support to the rendered points. Now, the location or value of the point based on its y
value can be changed. To enable the data editing, set the enable
property to true in the drag settings of the series. Also, the color can be set using fill
property and set the data editing minimum and maximum range using minY
and maxY
properties.
<ejs-chart id="dataEditingContainer" title="Sales Prediction of Products" load="load" >
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-chart-primaryxaxis valueType="Category" minimum=-0.5 maximum=6.5 labelPlacement="OnTicks">
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Sales" labelFormat="{value}%" minimum=0 maximum=100 interval=20
rangePadding="None">
<e-majorticklines width="0"></e-majorticklines>
<e-minorticklines width="0"></e-minorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="2" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" fill="orange">
<e-series-marker visible="true" width="10" height="10">
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="xValue" width="2" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" fill="darkblue" name="London">
<e-series-marker visible="true" width="10" height="10">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
public IActionResult DataEditing()
{
List<DataEditingData> chartData = new List<DataEditingData>
{
new DataEditingData { xValue = "2005", y = 21, y1= 21},
new DataEditingData { xValue = "2006", y = 60, y1= 22},
new DataEditingData { xValue = "2007", y = 45, y1= 36 },
new DataEditingData { xValue = "2008", y = 50, y1= 34},
new DataEditingData { xValue = "2009", y = 74, y1= 54 },
new DataEditingData { xValue = "2010", y = 65, y1= 55},
new DataEditingData { xValue = "2011", y = 85, y1= 60}
};
ViewBag.dataSource = chartData;
return View();
}
public class DataEditingData
{
public string xValue;
public double y;
public double y1;
}