Access a Series Point Using the API

NOTE
Before accessing a series point, you must gain access to its series. You can learn the details in the Access a Series Using the API topic.

To access series points, use the following methods. All of them return one or several objects whose fields and methods are described in the Point section of the API reference.

  • getAllPoints()
    Gets all points of the series.

    jQuery
    JavaScript
    var series = $("#chartContainer").dxChart("getSeriesByName", "Series 1");
    var seriesPoints = series.getAllPoints();
    Angular
    TypeScript
    import { ..., ViewChild } from "@angular/core";
    import { DxChartModule, DxChartComponent } from "devextreme-angular";
    // ...
    export class AppComponent {
        @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
        // Prior to Angular 8
        // @ViewChild(DxChartComponent) chart: DxChartComponent;
        seriesPointCollection: any = [];
        getSeriesPoints() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.seriesPointCollection = series.getAllPoints();
        }
    }
    @NgModule({
        imports: [
            // ...
            DxChartModule
        ],
        // ...
    })
    Vue
    App.vue
    <template> 
        <DxChart
            ref="chart"
            ... >
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getSeriesPoints () {
                const series = this.$refs.chart.instance.getSeriesByName("Series 1");
                const seriesPoints = series.getAllPoints();
                // ...
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef} ... >
                </Chart>
            );
        }
        getSeriesPoints () {
            const series = this.chartRef.current.instance.getSeriesByName("Series 1");
            const seriesPoints = series.getAllPoints();
            // ...
        }
    }
    
    export default App;
  • getPointsByArg(pointArg)
    Gets those points of the series that has a specific argument. Returns more than one point for range and financial series.

    jQuery
    JavaScript
    var seriesPoints = series.getPointsByArg("China");
    Angular
    TypeScript
    import { ..., ViewChild } from "@angular/core";
    import { DxChartModule, DxChartComponent } from "devextreme-angular";
    // ...
    export class AppComponent {
        @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
        // Prior to Angular 8
        // @ViewChild(DxChartComponent) chart: DxChartComponent;
        chinaPoint: any = {};
        getChinaPoints() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.chinaPoints = series.getPointsByArg("China");
        }
    }
    @NgModule({
        imports: [
            // ...
            DxChartModule
        ],
        // ...
    })
    Vue
    App.vue
    <template> 
        <DxChart
            ref="chart"
            ... >
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getChinaPoints () {
                const series = this.$refs.chart.instance.getSeriesByName("Series 1");
                const chinaPoints = series.getPointsByArg("China");
                // ...
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef} ... >
                </Chart>
            );
        }
        getChinaPoints () {
            const series = this.chartRef.current.instance.getSeriesByName("Series 1");
            const chinaPoints = series.getPointsByArg("China");
            // ...
        }
    }
    
    export default App;
  • getPointByPos(positionIndex)
    Gets a point by its index in the series. The index is zero-based.

    jQuery
    JavaScript
    var seriesPoint = series.getPointByPos(0);
    Angular
    TypeScript
    import { ..., ViewChild } from "@angular/core";
    import { DxChartModule, DxChartComponent } from "devextreme-angular";
    // ...
    export class AppComponent {
        @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
        // Prior to Angular 8
        // @ViewChild(DxChartComponent) chart: DxChartComponent;
        firstPoint: any = {};
        getFirstPoint() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.firstPoint = series.getPointByPos(0);
        }
    }
    @NgModule({
        imports: [
            // ...
            DxChartModule
        ],
        // ...
    })
    Vue
    App.vue
    <template> 
        <DxChart
            ref="chart"
            ... >
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getFirstPoint () {
                const series = this.$refs.chart.instance.getSeriesByName("Series 1");
                const firstPoint = series.getPointByPos(0);
                // ...
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef} ... >
                </Chart>
            );
        }
        getFirstPoint () {
            const series = this.chartRef.current.instance.getSeriesByName("Series 1");
            const firstPoint = series.getPointByPos(0);
            // ...
        }
    }
    
    export default App;
  • getVisiblePoints()
    Gets those points of the series that fall into the axis's visual range.

    jQuery
    JavaScript
    var visiblePoints = series.getVisiblePoints();
    Angular
    TypeScript
    import { ..., ViewChild } from "@angular/core";
    import { DxChartModule, DxChartComponent } from "devextreme-angular";
    // ...
    export class AppComponent {
        @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
        // Prior to Angular 8
        // @ViewChild(DxChartComponent) chart: DxChartComponent;
        visiblePoints: any = [];
        getVisiblePoints() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.visiblePoints = series.getVisiblePoints(0);
        }
    }
    @NgModule({
        imports: [
            // ...
            DxChartModule
        ],
        // ...
    })
    Vue
    App.vue
    <template> 
        <DxChart
            ref="chart"
            ... >
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getVisiblePoints () {
                const series = this.$refs.chart.instance.getSeriesByName("Series 1");
                const visiblePoints = series.getVisiblePoints();
                // ...
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef} ... >
                </Chart>
            );
        }
        getVisiblePoints () {
            const series = this.chartRef.current.instance.getSeriesByName("Series 1");
            const visiblePoints = series.getVisiblePoints();
            // ...
        }
    }
    
    export default App;

Apart from the API methods, you can access a series point in the event handlers. For example, the onPointClick event handler gets the clicked series point in the argument.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    (onPointClick)="onPointClick($event)">
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onPointClick (e) {
        let point = e.target;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart
        @point-click="onPointClick($event)"
        ...
    >
    </DxChart>
</template>

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

export default {
    components: {
        DxChart
    },
    methods: {
        onPointClick (e) {
            const point = e.target;
            // ...
        };
    }
}
</script>
React
App.js
import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart
                onPointClick={this.onPointClick}
                ...
            >
            </Chart>
        );
    }

    onPointClick (e) {
        const point = e.target;
        // ...
    };
}

export default App;
NOTE
Each Point object contains a reference to its parent series in the series field.
See Also