Search results

Data Editing in Blazor Chart component

08 Apr 2021 / 1 minute to read

Enable Data Editing

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 ChartDataEditSettings 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
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart Title="Inflation - Consumer Price">
    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

    <ChartPrimaryXAxis ValueType="Syncfusion.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>
            <ChartDataEditSettings Enable="true"></ChartDataEditSettings>
        </ChartSeries>
        <ChartSeries DataSource="@ConsumerDetails" XName="XValue" Width="2"
                     Opacity="1" YName="YValue1" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Width="10" Height="10">
            </ChartMarker>
            <ChartDataEditSettings Enable="true"></ChartDataEditSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{

    public class ChartData
    {
        public DateTime XValue { get; set; }
        public double YValue { get; set; }
        public double YValue1 { get; set; }
    }
    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

 Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

See Also