React PieChart - Update Data

To get the DataSource instance, call the PieChart's getDataSource() method:

function getDataSource() {
    return $("#pieChartContainer").dxPieChart("getDataSource");
}

import { Component, ViewChild } from '@angular/core';
import { DxPieChartComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent;
    // Prior to Angular 8
    // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
    getDataSource() {
        return this.pieChart.instance.getDataSource();
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPieChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPieChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxPieChart :ref="pieChartRefKey">
        <!-- ... -->
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

const pieChartRefKey = "my-pie-chart";

export default {
    components: {
        DxPieChart
    },
    data() {
        return {
            pieChartRefKey
        }
    },
    methods: {
        getDataSource: function() {
            return this.pieChart.getDataSource();
        }
    },
    computed: {
        pieChart: function() {
            return this.$refs[pieChartRefKey].instance;
        }
    }
}
</script>

import { useRef } from 'react';
import PieChart from 'devextreme-react/pie-chart';

export default function App() {
    const pieChart = useRef(null);
    const getDataSource = () => {
        return pieChart.current.instance.getDataSource();
    }

    return (
        <PieChart ref={pieChart}>
            {/* ... */}
        </PieChart>
    );
}

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The PieChart will be updated automatically.

getDataSource().store().push([
    { type: "update", key: "Oranges", data: { count: 10 } },
    { type: "remove", key: "Apples" }
]);

See Also

• Data Layer - Overview
• Data Layer - DataSource Examples

Make changes to the array using standard methods. Then, reassign the updated array to the PieChart using the option(optionName, optionValue) method.

var fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 }
];

fruits.push({ fruit: 'Pineapples', count: 3 });
// Reassigns the "fruits" array to the PieChart 
$("#pieChartContainer").dxPieChart("option", "dataSource", fruits);

See Also

• Get and Set Properties - jQuery

Enclose the dataSource property in square brackets to bind it to an array using one-way binding. Now, whenever an item is added or removed from the array, the PieChart will be updated accordingly.

<dx-pie-chart [dataSource]="fruits"></dx-pie-chart>

import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

Declare two-way binding between the dataSource property and the scope property that contains an array. For this, configure the bindingOptions object of the PieChart as follows.

<div ng-controller="DemoController">
    <div dx-pie-chart="{
        bindingOptions: {
            dataSource: 'fruits'
        }
    }"></div>
</div>

angular.module('DemoApp', ['dx'])
    .controller('DemoController', function ($scope) {
        $scope.fruits = [
            { fruit: 'Apples', count: 10 },
            { fruit: 'Oranges', count: 12 },
            { fruit: 'Lemons', count: 15 }
        ];
    });

Now, whenever an item is added or removed from the fruits array, the PieChart will be updated accordingly. If you need to track changes in objects, configure the bindingOptions object as follows.

<div ng-controller="DemoController">
    <div dx-pie-chart="{
        bindingOptions: {
            dataSource: {
                dataPath: 'fruits',
                deep: true
            }
        }
    }"></div>
</div>

In this case, the PieChart will use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the PieChart's peformance.

See Also

• Change Options - AngularJS

Declare the array observable and bind the dataSource property to it. Whenever an item is added or removed from this array, the PieChart will be updated accordingly.

<div id="pieChartContainer" data-bind="dxPieChart: {
    dataSource: fruits
}"></div>

var viewModel = {
    fruits: ko.observableArray([
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 }
    ])
};

ko.applyBindings(viewModel);

See Also

• Change Options - Knockout