getBoundingRect()
Gets the parameters of the label's minimum bounding rectangle (MBR).
Return Value:
hide(holdInvisible)
Hides the point label and keeps it invisible until the show() method is called.
Parameters:
holdInvisible:
shift(x, y)
Return Value:
The origin is at the upper-left corner of the Chart. The coordinates are positive numbers that specify the distance between the origin and the label.
The following example customizes a Bar Chart. The code moves the label to the top of the corresponding bar.
jQuery
index.js
$(() => { $('#chart').dxChart({ // ... series: { // ... type: 'bar', label: { visible: true, } }, onDrawn: function(e) { const point = e.component.getSeriesByPos(0).getPointByPos(5); const label = point.getLabel(); const rect = point.getBoundingRect(); const labelRect = label.getBoundingRect(); label.shift(rect.x + rect.width/2 - labelRect.width/2, rect.y - labelRect.height*1.5); } }); });
Angular
app.component.html
app.component.ts
<dx-chart ... (onDrawn)="moveLabel($event)" > <dxi-series ... type="bar" > <dxo-label ... [visible]="true" > </dxo-label> </dxi-series> </dx-chart>
export class AppComponent { // ... moveLabel (e) { const point = e.component.getSeriesByPos(0).getPointByPos(5); const label = point.getLabel(); const rect = point.getBoundingRect(); const labelRect = label.getBoundingRect(); label.shift(rect.x + rect.width/2 - labelRect.width/2, rect.y - labelRect.height*1.5); } }
Vue
App.vue
<template> <DxChart ... @drawn="moveLabel" > <DxSeries ... type="bar" > <DxLabel :visible="true"/> </DxSeries> </DxChart> </template> <script> import { DxChart, DxSeries, DxLabel } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries, DxLabel }, data() { return { dataSource, }; }, methods: { moveLabel (e) { const point = e.component.getSeriesByPos(0).getPointByPos(5); const label = point.getLabel(); const rect = point.getBoundingRect(); const labelRect = label.getBoundingRect(); label.shift(rect.x + rect.width/2 - labelRect.width/2, rect.y - labelRect.height*1.5); } } }; </script>
React
App.js
import React from 'react'; import { Chart, Series, Label } from 'devextreme-react/chart'; const moveLabel = (e) => { const point = e.component.getSeriesByPos(0).getPointByPos(5); const label = point.getLabel(); const rect = point.getBoundingRect(); const labelRect = label.getBoundingRect(); label.shift(rect.x + rect.width/2 - labelRect.width/2, rect.y - labelRect.height*1.5); }; function App() { return ( <Chart ... onDrawn={moveLabel} > <Series ... type="bar" > <Label visible={true} /> </Series> </Chart> ); } export default App;
show(holdVisible)
Shows the point label and keeps it visible until the hide() method is called.
Parameters:
holdVisible:
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.