Vue Chart - FullStackedAreaSeries.label
Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label properties for all chart series at once.
Specify the label object's properties within the commonSeriesSettings configuration object to set label properties for all chart series at once.
If you have several series of a single type, you can set label properties to the values specific to this series type using the corresponding object (area, line, etc.) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.
If you need to set a label property for an individual series, use the label object within the series object of the series array. The values that are set individually override the corresponding common values.
alignment
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.
argumentFormat
Formats the point argument before it is displayed in the point label. To format the point value, use the format property.
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.
See Also
- format - provides a comprehensive overview of formatting capabilities.
- Value Formatting - shows how to apply formatting to various UI component elements.
backgroundColor
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
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. |
| 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
displayFormat
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
$(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
<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
<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
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
@(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
@(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
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:
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.