Data Editing

28 Feb 20224 minutes to read

Enable Data Editing

It provides drag and drop support to the rendered points. Now, we can change the location or value of the point based on its y value. To enable the data editing, set the Enable property to true in the drag settings of the series. Also, we can set color using Fill property and set the data editing minimum and maximum range using MinY and MaxY properties.

CSHTML

@Html.EJS().Chart("container").Series(series =>
           {

               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
               .Fill("orange")
               .Marker(mr => mr.Visible(true).Width(10).Height(10))
               .XName("xValue").YName("y").DataSource(ViewBag.dataSource).Name("Product A").Width(2).Add();

               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
               .Fill("darkblue")
               .Marker(mr => mr.Visible(true).Width(10).Height(10))
               .XName("xValue").YName("y1").DataSource(ViewBag.dataSource).Name("Product B").Width(2).Add();

           }).PrimaryYAxis(px => px.Minimum(0).Maximum(100).Interval(20).LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)).LabelFormat("{value}%").Title("Sales")
            ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0)).LabelPlacement(Syncfusion.EJ2.Charts.LabelPlacement.OnTicks).Minimum("-0.5").Maximum("6.5")
            ).Tooltip(tr => tr.Enable(true)
            ).ChartArea(area => area.Border(br=>br.Color("transparent"))
            ).Tooltip(tt => tt.Enable(true)
            ).LegendSettings(lg => lg.Visible(false)
            ).Title("Sales Prediction of Products").Load("load").Render()

Default.cs

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;
        }