JavaScript/jQuery Chart - Access a Point Label Using the API
NOTE
Before accessing a point label, you must gain access to its series point. You can learn the details in the Access a Series Point Using the API topic.
To access a point label, call the getLabel() method on its series point. This method returns an object whose members are described in the Label section of the API reference. Note that for Range Series, the getLabel() method returns an array of two Label objects.
jQuery
JavaScript
var series = $("#chartContainer").dxChart("getSeriesByName", "Series 1");
var seriesPoints = series.getAllPoints();
var label = seriesPoints[0].getLabel();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;
label: any = {};
getPointLabel () {
let series = this.chart.instance.getSeriesByName("Series 1");
let seriesPoints = series.getAllPoints();
this.label = seriesPoints[0].getLabel();
}
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
App.vue
<template>
<DxChart
ref="chart"
... >
</DxChart>
</template>
<script>
import DxChart from 'devextreme-vue/chart';
export default {
components: {
DxChart
},
methods: {
getPointLabel () {
const series = this.$refs.chart.instance.getSeriesByName("Series 1");
const seriesPoints = series.getAllPoints();
const label = seriesPoints[0].getLabel();
// ...
}
}
}
</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>
);
}
getPointLabel () {
const series = this.chartRef.current.instance().getSeriesByName("Series 1");
const seriesPoints = series.getAllPoints();
const label = seriesPoints[0].getLabel();
// ...
}
}
export default App;Once you access a label, you can, for example, hide or show it by calling the hide() or show() method.
JavaScript
label.hide(); // label.show();
See Also
Feedback