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:
Feedback