Data editing in React Chart component

3 Feb 20269 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 services, which adds drag-and-drop support for data points.
Once enabled, the position or value of a data point can be changed dynamically based on its y value. To activate data editing, set the enable property to true in the drag settings of the corresponding series.
In addition, the following properties can be used to customize the data editing behavior and appearance:

• Use the fill property to set the color of the editable data points.
• Use the minY and maxY properties to define the minimum and maximum allowable range for editing the data points.
  These options help control both the visual feedback and the valid value range while editing data directly on the chart.

index.jsx

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"));

index.tsx

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"));

datasource.jsx

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

datasource.tsx

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