Search results

Data Editing

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.

data-editing.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Inflation - Consumer Price">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
  
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime" LabelFormat="y" 
        IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
  
        <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" 
        Interval="20">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
  
        <ChartTooltipsettings Enable="true"></ChartTooltipsettings>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ConsumerDetails" XName="XValue" Width="2"
                         Opacity="1" YName="YValue" Type="ChartSeriesType.Column">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
                <ChartDragSettings Enable="true"></ChartDragSettings>
            </ChartSeries>
            <ChartSeries DataSource="@ConsumerDetails" XName="XValue" Width="2"
                         Opacity="1" YName="YValue1" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
                <ChartDragSettings Enable="true"></ChartDragSettings>
            </ChartSeries>
        </ChartSeriesCollection>
</EjsChart>

@code{

    public class ChartData
    {
        public DateTime XValue;
        public double YValue;
        public double YValue1;
    }
    public List<ChartData> ConsumerDetails = new List<ChartData>
    {
        new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21, YValue1 = 28 },
        new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24, YValue1 = 44 },
        new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36, YValue1 = 48 },
        new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38, YValue1 = 50 },
        new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54, YValue1 = 66 },
        new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57, YValue1 = 78 },
        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70, YValue1 = 84 },
    };
}

 Enable Data Editing

See Also