DevExtreme Vue - Overview
Each series point can be accompanied with a label that displays the point's value(s) or custom data.
To configure point labels, use the fields of the label object. This object can be declared as follows.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: [{ label: { // Settings for all point labels of an individual series } }, { // ... }], commonSeriesSettings: { stackedline: { // or any other series type label: { // Settings for all point labels belonging to Stacked Line series } }, label: { // Settings for all point labels in the Chart } } }); });
Angular
<dx-chart ... > <dxi-series> <dxo-label ... > <!-- Settings for all point labels of an individual series --> </dxo-label> </dxi-series> <dxo-common-series-settings ... > <dxo-stackedline> <!-- or any other series type --> <dxo-label ... > <!-- Settings for all point labels belonging to Stacked Line series --> </dxo-label> </dxo-stackedline> <dxo-label ... > <!-- Settings for all point labels in the Chart --> </dxo-label> </dxo-common-series-settings> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Point labels are not visible by default. To make them visible, assign true to the label.visible option. With this configuration, point labels are displayed detached from their respective series points. You can make the connection between labels and points more evident by making label connectors visible. For this purpose, assign true to the label.connector.visible option.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: { label: { visible: true, connector: { visible: true } } } }); });
Angular
<dx-chart ... > <dxi-series> <dxo-label [visible]="true"> <dxo-connector [visible]="true"></dxo-connector> </dxo-label> </dxi-series> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
For details on other options of point labels, refer to the label section of the API reference and to other topics in this section.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.