JavaScript/jQuery Chart - Customize Point Labels
If you need to change the text displayed by point labels, declare the customizeText function. It must return a string value. The argument of this function contains information about the point whose label is being customized. In the following example, the customizeText function instructs point labels to display both the argument and value of the point.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: { label: { visible: true, customizeText: function (pointInfo) { return pointInfo.argument + ': ' + pointInfo.value; } } } }); });
Angular
<dx-chart ... > <dxi-series> <dxo-label [visible]="true" [customizeText]="customizeText"> </dxo-label> </dxi-series> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { customizeText (pointInfo: any) { return pointInfo.argument + ': ' + pointInfo.value; } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart ... > <DxSeries> <DxLabel :visible="true" :customize-text="customizeText" /> </DxSeries> </DxChart> </template> <script> import DxChart, { DxSeries, DxLabel } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries, DxLabel }, methods: { customizeText (pointInfo) { return `${pointInfo.argument}: ${pointInfo.value}`; } } } </script>
React
import React from 'react'; import Chart, { Series, Label } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... > <Series> <Label visible={true} customizeText={this.customizeText} /> </Series> </Chart> ); } customizeText (pointInfo) { return `${pointInfo.argument}: ${pointInfo.value}`; } } export default App;
You can also customize an individual label. For this purpose, assign a function to the customizeLabel property. This function must return an object with properties for the label that you want to customize. Note that the customizeLabel property should be declared at the root level of the Chart configuration.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: { label: { visible: true, backgroundColor: 'blue' } }, // Assigns the red color to all labels whose series points have value more than 100 // Other labels remain painted in blue customizeLabel: function (pointInfo) { return pointInfo.value > 100 ? { backgroundColor: 'red' } : { } } }); });
Angular
<dx-chart [customizeLabel]="customizeLabel"> <dxi-series> <dxo-label [visible]="true" backgroundColor="blue"> </dxo-label> </dxi-series> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // Assigns the red color to all labels whose series points have value more than 100 // Other labels remain painted in blue customizeLabel (pointInfo: any) { return pointInfo.value > 100 ? { backgroundColor: 'red' } : { } } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart :customize-label="customizeLabel"> <DxSeries> <DxLabel :visible="true" background-color="blue" /> </DxSeries> </DxChart> </template> <script> import DxChart, { DxSeries, DxLabel } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries, DxLabel }, methods: { // Assigns the red color to all labels whose series points have value more than 100 // Other labels remain painted in blue customizeLabel (pointInfo) { return pointInfo.value > 100 ? { backgroundColor: 'red' } : { }; } } } </script>
React
import React from 'react'; import Chart, { Series, Label } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart customizeLabel={this.customizeLabel} > <Series> <Label visible={true} backgroundColor="blue" /> </Series> </Chart> ); } // Assigns the red color to all labels whose series points have value more than 100 // Other labels remain painted in blue customizeLabel (pointInfo) { return pointInfo.value > 100 ? { backgroundColor: 'red' } : { }; } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.