label
Configures point labels.
Declared in commonSeriesSettings, the label settings apply to all point labels in the chart. Declared in a series configuration object, the label settings apply only to the point labels that belong to this particular series. The series-specific label settings override the common ones.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: [{ label: { // Settings for all point labels of an individual series } }, { // ... }], commonSeriesSettings: { 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-label ... > <!-- Settings for all point labels in the Chart --> </dxo-label> </dxo-common-series-settings> </dx-chart>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxChartModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxChartModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <dx-chart ... > <dx-series ... > <dx-label ...> <!-- Settings for all point labels of an individual series --> </dx-label> </dx-series> <dx-common-series-settings ... > <dx-label ... > <!-- Settings for all point labels in the Chart --> </dx-label> </dx-common-series-settings> </dx-chart> </template> <script> import DxChart, { DxSeries, DxLabel, DxCommonSeriesSettings } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries, DxLabel, DxCommonSeriesSettings }, // ... } </script>
React
import React from 'react'; import Chart, { Series, Label, CommonSeriesSettings } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... > <Series ... > <Label ... > // Settings for all point labels of an individual series </Label> </Series> <CommonSeriesSettings ... > <Label ... > // Settings for all point labels in the Chart </Label> </CommonSeriesSettings> </Chart> ); } } export default App;
See Also
alignment
Aligns point labels in relation to their points.
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left
, Center
, and Right
.
argumentFormat
Formats the point argument before it is displayed in the point label. To format the point value, use the format option.
A point label displays only the point value by default. Using the label.customizeText option, you can instruct the label to display the point argument as well. The argumentFormat option applies in this case only. This option accepts an object whose fields are described in the format section.
See Also
- format - provides a comprehensive overview of formatting capabilities.
- Data Formatting - shows how to apply formatting to various widget elements.
backgroundColor
Colors the point labels' background. The default color is inherited from the points.
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
You can remove the label's background by setting this option to "none". In this case, the label's text is the same color as the point.
connector
Configures the label connectors.
A point label is always displayed near its series point, though the label is placed separately. To make the relationship between the series point and its label evident, use a connector.
By default, label connectors are hidden. To make them visible, set the connector.visible option to true.
customizeText
Customizes the text displayed by point labels.
Information on the series point.
The text for the label to display.
This option accepts a function whose parameter exposes the following fields.
Field | Description |
---|---|
originalValue | The raw value of the point. |
value | The originalValue after type cast. |
valueText | The value with an applied format and converted to string. |
originalArgument | The raw argument of the point. |
argument | The originalArgument after type cast. |
argumentText | The argument with an applied format and converted to string. |
percent | The percentage value of the point. |
percentText | The percent with an applied format and converted to string. |
total | The sum of all values in the stack. |
totalText | The total with an applied format and converted to string. |
point | The Point object. |
seriesName | The name of the series to which the point belongs. |
this
keyword.See Also
format
Formats the point value before it will be displayed in the point label.
This option accepts an object whose fields are described in the format section. However, there is one more field, called percentPrecision, which is available only to full-stacked-like series, where one point always has an absolute and a percentage value. The percentPrecision field specifies how many digits after the decimal point to save in the percentage value. See an example in the following code.
format: { type: "fixedPoint", // the format of absolute values precision: 1, // the precision of absolute values (123.456 --> 123.4) percentPrecision: 2 // the precision of percentage values (12.3456 % --> 12.34 %) }
See Also
- format - provides a comprehensive overview of formatting capabilities.
- Data Formatting - shows how to apply formatting to various widget elements.
horizontalOffset
Along with verticalOffset, shifts point labels from their initial positions.
The number assigned to this option specifies the shift in pixels. A negative number shifts the point labels to the left, a positive number - to the right.
position
Specifies whether to display point labels inside or outside of series points. Applies only to bubble, range-like and bar-like series.
Use the RelativePosition
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Inside
and Outside
.
showForZeroValues
Specifies whether or not to show labels for points with zero value. Applies only to bar-like series.
verticalOffset
Along with horizontalOffset, shifts point labels from their initial positions.
The number assigned to this option specifies the shift in pixels. A negative number shifts the point labels up, a positive number shifts them down.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.