JavaScript/jQuery RangeSelector - chart.series.label
Type:
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
JavaScript
$(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
app.component.html
app.component.ts
app.module.ts
<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
App.vue
<template>
<DxChart ... >
<DxSeries ... >
<DxLabel ...>
<!-- Settings for all point labels of an individual series -->
</DxLabel>
</DxSeries>
<DxCommonSeriesSettings ... >
<DxLabel ... >
<!-- Settings for all point labels in the Chart -->
</DxLabel>
</DxCommonSeriesSettings>
</DxChart>
</template>
<script>
import DxChart, {
DxSeries,
DxLabel,
DxCommonSeriesSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxSeries,
DxLabel,
DxCommonSeriesSettings
},
// ...
}
</script>React
App.js
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
Type:
Default Value: 'center'
This property accepts the following values:
center
Displays labels in the center of the point.left
Aligns the left corner of the label to the center of the point.right
Aligns the right corner of the label to the center of the point.
NOTE
This property has no effect if the rotated property is enabled.
argumentFormat
Formats the point argument before it is displayed in the point label. To format the point value, use the format property.
Type:
Default Value: undefined
A point label displays only the point value by default. Using the label.customizeText property, you can instruct the label to display the point argument as well. The argumentFormat property applies in this case only. This property accepts an object whose fields are described in the format section.
NOTE
DevExtreme UI components provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from topics in the Installation section.
See Also
- format - provides a comprehensive overview of formatting capabilities.
- Value Formatting - shows how to apply formatting to various UI component elements.
backgroundColor
Type:
Default Value: undefined
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
You can remove the label's background by setting this property to "none". In this case, the label's text is the same color as the point.
customizeText
Type:
Function parameters:
pointInfo:
Return Value:
Cannot be used in themes.
NOTE
Return
null to hide the series label.This property 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. |
| size | The size value of the point. For bubble series only. |
| index | 0 - if the point is minimum; 1 - if the point is maximum. For range area and range bar series only. |
| point | The Point object. |
| seriesName | The name of the series to which the point belongs. |
The following fields are inherent to stacked-like series only.
| Field | Description |
|---|---|
| percent | Point percentage value. |
| percentText | The percentage 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. |
The following fields are inherent to financial series (candlestick and stock) only.
| Field | Description |
|---|---|
| originalOpenValue | The raw open value of the point. |
| openValue | The originalOpenValue after type cast. |
| openValueText | The openValue with an applied format and converted to string. |
| originalCloseValue | The raw close value of the point. |
| closeValue | The originalCloseValue after type cast. |
| closeValueText | The closeValue with an applied format and converted to string. |
| originalHighValue | The raw high value of the point. |
| highValue | The originalHighValue after type cast. |
| highValueText | The highValue with an applied format and converted to string. |
| originalLowValue | The raw low value of the point. |
| lowValue | The originalLowValue after type cast. |
| lowValueText | The lowValue with an applied format and converted to string. |
| reductionValue | The reduction value. |
| reductionValueText | The reductionValue with an applied format and converted to string. |
NOTE
As an alternative to the function’s parameter you can use the
this keyword.See Also
displayFormat
Type:
Default Value: undefined
This property is ignored if labels are hidden.
Use the parameters of the label.customizeText function as placeholders in the displayFormat property value.
The example below illustrates how to customize label text for all series and individual series:
jQuery
index.js
$(function() {
$("#chartContainer").dxChart({
// ...
commonSeriesSettings: {
type: 'line',
label: {
format: 'thousands',
visible: true,
displayFormat: "{seriesName}: {valueText}",
}
},
series: [
{ valueField: 'y1564', name: '15-64 years' },
{ valueField: 'y014', name: '0-14 years' },
{ valueField: 'y65', name: '65 years and older',
label: {
displayFormat: "<u>65+ years</u>: {valueText}",
},
},
],
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
<dxi-series valueField="y1564" name="15-64 years"></dxi-series>
<dxi-series valueField="y014" name="0-14 years"></dxi-series>
<dxi-series valueField="y65" name="65 years and older">
<dxo-label displayformat="<u>65+ years</u>: {valueText}">
</dxo-label>
</dxi-series>
<dxo-common-series-settings ... >
<dxo-label
format="thousands"
[visible]="true"
displayFormat="{seriesName}: {valueText}">
</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
App.vue
<template>
<DxChart ... >
<DxSeries
value-field="y1564"
name="15-64 years"
/>
<DxSeries
value-field="y014"
name="0-14 years"
/>
<DxSeries
value-field="y65"
name="65 years and older">
<DxLabel display-format="<u>65+ years</u>: {valueText}" />
</DxSeries>
<DxCommonSeriesSettings ... >
<DxLabel :visible="true" format="thousands" display-format="{seriesName}: {valueText}" />
</DxCommonSeriesSettings>
</DxChart>
</template>
<script>
import DxChart, {
DxSeries,
DxLabel,
DxCommonSeriesSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxSeries,
DxLabel,
DxCommonSeriesSettings
},
// ...
}
</script>React
App.js
import React from 'react';
import Chart, {
Series,
Label,
CommonSeriesSettings
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<Series valueField="y1564" name="15-64 years"></Series>
<Series valueField="y014" name="0-14 years"></Series>
<Series valueField="y65" name="65 years and older">
<Label displayFormat="<u>65+ years</u>: {valueText}" >
</Label>
</Series>
<CommonSeriesSettings ... >
<Label
format="thousands"
visible={true}
displayFormat="{seriesName}: {valueText}"
>
</Label>
</CommonSeriesSettings>
</Chart>
);
}
}
export default App;ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Chart()
.CommonSeriesSettings(s => s
.Label(label => label
.Format(Format.Thousands)
.DisplayFormat("{seriesName}: {valueText}")
.Visible(true)
)
)
)
.Series(s => {
s.Add().ValueField("y1564").Name("15-64 years");
s.Add().ValueField("y014").Name("0-14 years");
s.Add().ValueField("y65").Name("65 years and older").Label(label => label
.DisplayFormat("<u>65+ years</u>: {valueText}")
);
})
// ...
)ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Chart()
.CommonSeriesSettings(s => s
.Label(label => label
.Format(Format.Thousands)
.DisplayFormat("{seriesName}: {valueText}")
.Visible(true)
)
)
)
.Series(s => {
s.Add().ValueField("y1564").Name("15-64 years");
s.Add().ValueField("y014").Name("0-14 years");
s.Add().ValueField("y65").Name("65 years and older").Label(label => label
.DisplayFormat("<u>65+ years</u>: {valueText}")
);
})
// ...
)format
Type:
Default Value: undefined
See the format section for information on accepted values.
If you specify the format with an object and apply it to a full-stacked-like series, this object can also contain the percentPrecision field. Full-stacked-like series points have absolute and percentage values. The percentPrecision field specifies how many decimal digits the percentage values should have:
JavaScript
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
Feedback