JavaScript/jQuery Chart - Access a Series Point Using the API

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.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            // ...
        }
    });
});

<dx-chart
    (onPointClick)="onPointClick($event)">
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onPointClick (e) {
        let point = e.target;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

<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>

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;

See Also

• Access a Series Using the API
• Access a Point Label Using the API
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout