JavaScript/jQuery PieChart - series.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 the series.
argumentFormat
Formats the point argument before it is displayed in the point label. To format the point value, use the format property.
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.
connector
A series point label can be placed separately near the represented point. To make the relationship between a label and its respective point clear, use a connector. Set the connector's visibility and appearance properties using the connector object.
customizeText
When implementing a callback function for this property, use the point value to be displayed in a label. In addition, you can use the argument of the currently displayed value. These values can be accessed using the following properties of the this object.
- value
Specifies the value of the represented point. - valueText
Specifies the value of the represented point with applied formatting if the format property is specified. - argument
Specifies the argument value of the represented point. - argumentText
Specifies the argument value of the represented point with applied formatting if the argumentFormat property is specified. - percent
Specifies the proportional value of the represented point in a floating point format. - percentText
Specifies the value of the represented point as a percentage with a precision of the format.percentPrecision property. - point.tag
Specifies the tag of the represented point.
this keyword.See Also
displayFormat
This property is ignored if labels are hidden.
Use the parameters of the label.customizeLabel 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").dxPieChart({
// ...
commonSeriesSettings: {
label: {
visible: true,
displayFormat: "{series}: {value}",
}
},
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>: {value}",
},
},
],
});
});Angular
<dx-pie-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>: {value}">
</dxo-label>
</dxi-series>
<dxo-common-series-settings ... >
<dxo-label
[visible]="true"
displayFormat="{series}: {value}">
</dxo-label>
</dxo-common-series-settings>
</dx-pie-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 { DxPieChartModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxPieChartModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
<template>
<DxPieChart ... >
<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>: {value}" />
</DxSeries>
<DxCommonSeriesSettings ... >
<DxLabel :visible="true" display-format="{series}: {value}" />
</DxCommonSeriesSettings>
</DxPieChart>
</template>
<script>
import DxPieChart, {
DxSeries,
DxLabel,
DxCommonSeriesSettings
} from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart,
DxSeries,
DxLabel,
DxCommonSeriesSettings
},
// ...
}
</script>React
import React from 'react';
import PieChart, {
Series,
Label,
CommonSeriesSettings
} from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ... >
<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>: {value}" >
</Label>
</Series>
<CommonSeriesSettings ... >
<Label
visible={true}
displayFormat="{series}: {value}"
>
</Label>
</CommonSeriesSettings>
</PieChart>
);
}
}
export default App;ASP.NET Core Controls
@(Html.DevExtreme().PieChart()
.CommonSeriesSettings(s => s
.Label(label => label
.DisplayFormat("{series}: {value}")
.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>: {value}")
);
})
// ...
)ASP.NET MVC Controls
@(Html.DevExtreme().PieChart()
.CommonSeriesSettings(s => s
.Label(label => label
.DisplayFormat("{series}: {value}")
.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>: {value}")
);
})
// ...
)format
See the format section for information on accepted values.
When this property value is undefined, the date-time axes display larger date range boundaries in labels. For example, if an axis displays months, it also displays a year near each instance of January. If an axis displays days, it also displays a month name near each first visible day mark.
See Also
textOverflow
Specifies what to do with label texts that overflow the allocated space after applying wordWrap: hide, truncate them and display an ellipsis, or do nothing.
wordWrap
The following modes are available:
"normal"
Text breaks only at allowed breakpoints (for example, a space between two words)."breakWord"
Words can be broken if there are no available breakpoints in the line."none"
Word wrap is disabled.
If the text overflows the container even after word wrap, the UI component applies the textOverflow property.