HelpBot Assistant

How can I help you?

Data editing in Vue Chart component

3 Feb 202614 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.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis="primaryYAxis"
            :legendSettings='legend' :chartArea="chartArea">
            <e-series-collection>
                <e-series :dataSource='columnData' type='Column' xName='x' yName='y' name='Product A' :marker="marker"
                    :dragSettings="dragSettings"> </e-series>
                <e-series :dataSource='lineData' type='Line' xName='x' yName='y' name='Product B' :marker="marker"
                    :dragSettings="dragSettings"> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ColumnSeries, DateTime, Tooltip, Legend, DataEditing } from "@syncfusion/ej2-vue-charts";



const columnData = [
    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
    { x: new Date(2011, 0, 1), y: 70 }
];
const lineData = [
    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
    { x: new Date(2011, 0, 1), y: 70 }
];
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'y',
    intervalType: 'Years',
    edgeLabelPlacement: 'Shift',
    majorGridLines: { width: 0 }
};
const primaryYAxis =
{
    labelFormat: '{value}%',
    rangePadding: 'None',
    minimum: 0,
    maximum: 100,
    interval: 20,
    lineStyle: { width: 0 },
    majorTickLines: { width: 0 },
    minorTickLines: { width: 0 }
};
const chartArea = {
    border: {
        width: 0
    }
};
const title = 'Sales History of Product X';
const legend = { visible: false };
const marker = {
    visible: true, width: 10, height: 10
};
const dragSettings = {
    enable: true
};

provide('chart', [LineSeries, ColumnSeries, DateTime, Tooltip, Legend, DataEditing]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis="primaryYAxis"
            :legendSettings='legend' :chartArea="chartArea">
            <e-series-collection>
                <e-series :dataSource='columnData' type='Column' xName='x' yName='y' name='Product A' :marker="marker"
                    :dragSettings="dragSettings"> </e-series>
                <e-series :dataSource='lineData' type='Line' xName='x' yName='y' name='Product B' :marker="marker"
                    :dragSettings="dragSettings"> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, ColumnSeries, DateTime, Tooltip, Legend, DataEditing } from "@syncfusion/ej2-vue-charts";


export default {
    name: "App",
    components: {
        "ejs-chart": ChartComponent,
        "e-series-collection": SeriesCollectionDirective,
        "e-series": SeriesDirective
    },
    data() {
        return {
            columnData: [
                { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
                { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
                { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
                { x: new Date(2011, 0, 1), y: 70 }
            ],
            lineData: [
                { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
                { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
                { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
                { x: new Date(2011, 0, 1), y: 70 }
            ],
            primaryXAxis: {
                valueType: 'DateTime',
                labelFormat: 'y',
                intervalType: 'Years',
                edgeLabelPlacement: 'Shift',
                majorGridLines: { width: 0 }
            },
            primaryYAxis:
            {
                labelFormat: '{value}%',
                rangePadding: 'None',
                minimum: 0,
                maximum: 100,
                interval: 20,
                lineStyle: { width: 0 },
                majorTickLines: { width: 0 },
                minorTickLines: { width: 0 }
            },
            chartArea: {
                border: {
                    width: 0
                }
            },
            title: 'Sales History of Product X',
            legend: { visible: false },
            marker: {
                visible: true, width: 10, height: 10
            },
            dragSettings: {
                enable: true
            }
        };
    },
    provide: {
        chart: [LineSeries, ColumnSeries, DateTime, Tooltip, Legend, DataEditing]
    },
};
</script>
<style>
#container {
    height: 350px;
}
</style>