Data editing in Angular Chart component

3 Feb 20267 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 provider, 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.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LineSeriesService, ColumnSeriesService, CategoryService, DataEditingService, TooltipService } from '@syncfusion/ej2-angular-charts'
import { LegendService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ LegendService, LineSeriesService, ColumnSeriesService, CategoryService, DataEditingService, TooltipService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'
            [chartArea]="chartArea" [tooltip]="tooltip">
        <e-series-collection>
            <e-series [dataSource]='columnData' type='Column' xName='x' yName='y' width="2" [marker]="marker" [dragSettings]="dragSettings"></e-series>
            <e-series [dataSource]='lineData' type='Line' xName='x' yName='y' width="2" [marker]="marker" [dragSettings]="dragSettings"></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public columnData?: Object[];
    public lineData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public chartArea?: Object;
    public marker?: Object;
    public dragSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.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 }
        ];
        this.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 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            minimum: -0.5,
            maximum: 6.5,
            labelPlacement: 'OnTicks',
            majorGridLines: { width: 0 },
        };
        this.primaryYAxis = {
           rangePadding: 'None',
            minimum: 0,
            title : 'Sales',
            labelFormat: '{value}%',
            maximum: 100,
            interval: 20,
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 },
            minorTickLines: { width: 0 }
        };
        this.chartArea = {
            border: {
                width: 0
            }
        };
        this.title = 'Inflation - Consumer Price';
        this.marker = {
             visible: true,
             width: 10,
             height: 10
        };
        this.dragSettings = {
            enable: true
        };
        this.tooltip = {
            enable: true
        }
    }

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));