Vue Chart - tooltip

A tooltip is a miniature rectangle displaying values of a series point. A tooltip appears when the end-user hovers the cursor over a series point. You can enable/disable tooltips, change their appearance and format their text using fields of the tooltip configuration object.

See Also

• format - provides a comprehensive overview of formatting capabilities.
• Value Formatting - shows how to apply formatting to various UI component elements.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

This property sets one color for all tooltips. You can specify a particular tooltip's color in the tooltip.customizeTooltip function.

View Demo

The pointInfo object has different fields for different series types. The following fields are available for all series types:

The following pointInfo fields are available for stacked series such as the full-stacked bar or full-stacked area:

The following pointInfo fields are available for the range-like series, such as range area or range bar:

The following pointInfo fields are available for the financial chart series, such as candle stick or stock:

Display a Tooltip Demo Tooltip HTML Support Demo

See Also

• Value Formatting

The following table demonstrates how the corner's curvature depends on the cornerRadius value:

cornerRadius	Result
cornerRadius: 0
cornerRadius: 15
cornerRadius: 35

This property should be assigned a function that returns an object with the following fields:

The pointInfo object has different fields for the different series types. The following fields are available for all the series types:

The following pointInfo fields are available for the stacked-like series such as full-stacked bar or full-stacked area:

The folllowing pointInfo fields are available for the range-like series, such as range area or range bar:

The folllowing pointInfo fields are available for the financial chart series, such as candle stick or stock:

The following example hides a tooltip for points with values greater than 10:

$(function () {
    $("#chartContainer").dxChart({
        // ...
        tooltip: {
            // ...
            enabled: true,
            customizeTooltip(arg) {
                if (arg.originalValue > 10) {
                    return { text: null };
                }
            },
        },
    });
});

<dx-chart ... >
    <dxo-tooltip ...
        [enabled]="true"
        [customizeTooltip]="customizeTooltip"
    >
    </dxo-tooltip>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeTooltip (arg) {
        if (arg.originalValue > 10) {
            return { text: null };
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

<template>
    <DxChart ... >
        <DxTooltip ...
            :enabled="true"
            :customize-tooltip="customizeTooltip"
        />
    </DxChart>
</template>

<script>
import DxChart, { DxTooltip } from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxTooltip
    },
    methods: {
        customizeTooltip (arg) {
            if (arg.originalValue > 10) {
                return { text: null };
            }
        }
    }
}
</script>

import React from 'react';

import Chart, { Tooltip } from 'devextreme-react/chart';

const customizeTooltip = (arg) => {
    if (arg.originalValue > 10) {
        return { text: null };
    }
};

function App() {
    return (
        <Chart ... >
            <Tooltip ...
                enabled={true}
                customizeTooltip={customizeTooltip}
            />
        </Chart>
    );
}

export default App;

Display a Tooltip Demo Tooltip HTML Support Demo

See the format section for information on accepted values.

See Also

• Value Formatting

This property accepts a value from 0 to 1, where 0 makes tooltips completely transparent, and 1 makes them opaque.

This property can have one of the following values:

View Demo

See Also

• customizeTooltip

If the UI component's container has the CSS z-index property specified, and tooltips are displayed incorrectly, configure their z-index using this property.