Vue Chart - Label.Methods

Methods used to control the point label.

getBoundingRect()

Gets the parameters of the label's minimum bounding rectangle (MBR).

Return Value:

Object

An object with the following content: { x: numeric, y: numeric, height: numeric, width: numeric }.

The object returned by this method contains the X and Y coordinates of the upper-left corner of the MBR. These coordinates are relative to the client area (UI component's container). Additionally, the returned object contains the height and width of the MBR.

hide()

Hides the point label.

NOTE
If your use-case involves UI component rerendering, a label's visibility state may be reset. To keep the state, call this method with true as an argument.

hide(holdInvisible)

Hides the point label and keeps it invisible until the show() method is called.

Parameters:
holdInvisible:

Boolean

Specifies whether to keep the point label invisible.

isVisible()

Checks whether the point label is visible.

Return Value:

Boolean

true if the point label is visible; otherwise false.

shift(x, y)

Moves label to the specified location.

Parameters:
x:

Number

The x coordinate.

y:

Number

The y coordinate.

Return Value:

Object

The label's instance.

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()

Shows the point label.

NOTE
If your use-case involves UI component rerendering, a label's visibility state may be reset. To keep the state, call this method with true as an argument.

show(holdVisible)

Shows the point label and keeps it visible until the hide() method is called.

Parameters:
holdVisible:

Boolean

Specifies whether to keep the point label visible.