Data Editing in React Chart

26 Aug 202622 minutes to read

Enable Data Editing

Data editing allows users to modify chart data points interactively by dragging and dropping the rendered points. This functionality is enabled by injecting the DataEditing module into the chart’s services, which adds drag-and-drop support for data points.

Once enabled, the y value of a data point can be changed dynamically by dragging it. To activate data editing, set the enable property of the dragSettings to true on the corresponding series.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, LineSeries, DataEditing } from '@syncfusion/ej2-react-charts';
import { columnData, lineData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', minimum: -0.5, maximum: 6.5, labelPlacement: 'OnTicks', majorGridLines: { width: 0 } };
    const primaryyAxis = { rangePadding: 'None', minimum: 0, title: 'Sales', labelFormat: '{value}%', maximum: 100, interval: 20, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } };
    const border = { border: { width: 0 } };
    const tooltip = { enable: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} chartArea={border} title='Sales Prediction of Products' tooltip={tooltip}>
    <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, LineSeries, DataEditing]}/>
    <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='x' yName='y' name='Product A' type='Column' dragSettings={{ enable: true }} marker={{ visible: true, width: 10, height: 10 }}>  
        </SeriesDirective>
        <SeriesDirective dataSource={lineData} xName='x' yName='y' name='Product B' type='Line' marker={{ visible: true, width: 10, height: 10 }} dragSettings={{ enable: true }}></SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries, LineSeries, DataEditing, TooltipSettingsModel}
from'@syncfusion/ej2-react-charts';
import { columnData, lineData } from './datasource';

function App() {
    const primaryxAxis: AxisModel = {  valueType: 'Category', minimum: -0.5, maximum: 6.5,labelPlacement: 'OnTicks', majorGridLines: { width: 0 } };
    const primaryyAxis: AxisModel = { rangePadding: 'None', minimum: 0, title : 'Sales', labelFormat: '{value}%', maximum: 100, interval: 20, lineStyle: { width: 0 }, majorTickLines: { width: 0 },minorTickLines: { width: 0 } };
    const border = { border: { width: 0} };
    const tooltip: TooltipSettingsModel = {enable: true};
    return <ChartComponent id='charts' primaryXAxis={ primaryxAxis } primaryYAxis={ primaryyAxis }chartArea={border} title='Sales Prediction of Products' tooltip={tooltip}>
    <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, LineSeries, DataEditing ]}/>
    <SeriesCollectionDirective>
        <SeriesDirective dataSource ={columnData}  xName='x' yName='y' name='Product A' type='Column' dragSettings={{enable: true}} marker={{visible: true, width: 10, height: 10}}>  
        </SeriesDirective>
        <SeriesDirective dataSource ={lineData}  xName='x' yName='y' name='Product B' type='Line' marker={{visible: true, width: 10, height: 10}} dragSettings={{enable: true}}></SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 60 },
    { x: '2007', y: 45 }, 
    { x: '2008', y: 50 },
    { x: '2009', y: 74 }, 
    { x: '2010', y: 65 },
    { x: '2011', y: 85 }
];

export let lineData = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 22 },
    { x: '2007', y: 36 }, 
    { x: '2008', y: 34 },
    { x: '2009', y: 54 }, 
    { x: '2010', y: 55 },
    { x: '2011', y: 60 }
];
export let columnData: Object[] = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 60 },
    { x: '2007', y: 45 }, 
    { x: '2008', y: 50 },
    { x: '2009', y: 74 }, 
    { x: '2010', y: 65 },
    { x: '2011', y: 85 }
];

export let lineData: Object[] = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 22 },
    { x: '2007', y: 36 }, 
    { x: '2008', y: 34 },
    { x: '2009', y: 54 }, 
    { x: '2010', y: 55 },
    { x: '2011', y: 60 }
];

Customization

The appearance and value range of the editable data points can be customized using the following dragSettings properties:

fill – Sets the color of the editable data points.
minY – Defines the minimum allowable y value when editing a data point.
maxY – Defines the maximum allowable y value when editing a data point.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, DataEditing } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {
    return (
        <ChartComponent
            id="charts"
            primaryXAxis={{
                valueType: 'Category',
                minimum: -0.5,
                maximum: 6.5,
                labelPlacement: 'OnTicks',
                majorGridLines: { width: 0 }
            }}
            primaryYAxis={{
                rangePadding: 'None',
                minimum: 0,
                title: 'Sales',
                labelFormat: '{value}%',
                maximum: 100,
                interval: 20,
                lineStyle: { width: 0 },
                majorTickLines: { width: 0 },
                minorTickLines: { width: 0 }
            }}
            chartArea={{ border: { width: 0 } }}
            title="Sales Prediction of Products"
            tooltip={{ enable: true }}
        >
            <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, DataEditing]} />
            <SeriesCollectionDirective>
                <SeriesDirective
                    dataSource={columnData}
                    xName="x"
                    yName="y"
                    name="Product A"
                    type="Column"
                    dragSettings={{
                        enable: true,
                        fill: 'red',
                        minY: 0,
                        maxY: 100
                    }}
                    marker={{ visible: true, width: 10, height: 10 }}
                />
            </SeriesCollectionDirective>
        </ChartComponent>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
  Legend, Category, Tooltip, DataLabel, ColumnSeries, DataEditing
} from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {
  return (
    <ChartComponent
      id="charts"
      primaryXAxis={{
        valueType: 'Category',
        minimum: -0.5,
        maximum: 6.5,
        labelPlacement: 'OnTicks',
        majorGridLines: { width: 0 }
      }}
      primaryYAxis={{
        rangePadding: 'None',
        minimum: 0,
        title: 'Sales',
        labelFormat: '{value}%',
        maximum: 100,
        interval: 20,
        lineStyle: { width: 0 },
        majorTickLines: { width: 0 },
        minorTickLines: { width: 0 }
      }}
      chartArea={{ border: { width: 0 } }}
      title="Sales Prediction of Products"
      tooltip={{ enable: true }}
    >
      <Inject
        services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, DataEditing]}
      />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={columnData}
          xName="x"
          yName="y"
          name="Product A"
          type="Column"
          dragSettings={{
            enable: true,
            fill: 'red',
            minY: 0,
            maxY: 100
          }}
          marker={{ visible: true, width: 10, height: 10 }}
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 60 },
    { x: '2007', y: 45 }, 
    { x: '2008', y: 50 },
    { x: '2009', y: 74 }, 
    { x: '2010', y: 65 },
    { x: '2011', y: 85 }
];

export let lineData = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 22 },
    { x: '2007', y: 36 }, 
    { x: '2008', y: 34 },
    { x: '2009', y: 54 }, 
    { x: '2010', y: 55 },
    { x: '2011', y: 60 }
];
export let columnData: Object[] = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 60 },
    { x: '2007', y: 45 }, 
    { x: '2008', y: 50 },
    { x: '2009', y: 74 }, 
    { x: '2010', y: 65 },
    { x: '2011', y: 85 }
];

export let lineData: Object[] = [
    { x: '2005', y: 21 }, 
    { x: '2006', y: 22 },
    { x: '2007', y: 36 }, 
    { x: '2008', y: 34 },
    { x: '2009', y: 54 }, 
    { x: '2010', y: 55 },
    { x: '2011', y: 60 }
];

Events

The following events are raised while a data point is being dragged. Use them to read or persist the edited value.

The dragStart, drag, and dragEnd events expose an IDataEditingEventArgs payload with the following fields:

newValue – The new y value computed from the drag.
oldValue – The original y value before the drag.
point – The Points instance being dragged.
pointIndex – Index of the point within its series.
series – The Series that contains the point.
seriesIndex – Index of the series in the chart.

The dragComplete event exposes an IDragCompleteEventArgs payload with:

selectedDataValues – The selected X and Y values of the edited data.
name – The name of the event.
cancel – Set to true to cancel the operation.

Event	Description
`dragStart`	Triggered when a data point drag begins.
`drag`	Triggered continuously while a data point is being dragged.
`dragEnd`	Triggered when a data point drag operation ends.
`dragComplete`	Triggered after a data point drag is completed.

Search docs

Ask Syncfusion AI Assistant