All docs
V19.1
19.2 (CTP)
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Box
Map
Vue

commonAnnotationSettings

Specifies settings common for all annotations in the chart.

Type:

Object

Settings specified here can be ignored in favor of individual annotation settings specified in the annotations[] array. Refer to the array's description for information on how to configure annotations.

The following code shows the commonAnnotationSettings declaration syntax:

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonAnnotationSettings: {
            tooltipEnabled: false
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dx-common-annotation-settings
        [tooltipEnabled]="false">
    </dx-common-annotation-settings>
</dx-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <dx-chart ... >
        <dx-common-annotation-settings
            :tooltip-enabled="false"
        />
    </dx-chart>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxChart, {
    DxCommonAnnotationSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonAnnotationSettings
    },
    data() {
        // ...
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <CommonAnnotationSettings
                    tooltipEnabled={false}
                />
            </Chart>
        );
    }
}
export default App;

View Demo

See Also

argument

Positions the annotation relative to a specific argument.

Type:

Number

|

Date

|

String

Default Value: undefined
See Also

arrowLength

Specifies the length of the annotation's arrow in pixels.

Type:

Number

Default Value: 14

arrowWidth

Specifies the width of the annotation's arrow at its junction with the annotation rectangle.

Type:

Number

Default Value: 14

DevExtreme Chart: Annotation Arrow

axis

Specifies the name of the value axis on which the value is specified. Useful for a multi-axis chart.

Type:

String

Default Value: undefined

border

Configures the appearance of the annotation's border.

Type:

Object

color

Specifies the color that fills the annotation.

Type:

String

Default Value: '#ffffff'

This option supports the following colors:

customizeTooltip

Customizes the text and appearance of the annotation's tooltip.

Type:

Function

Function parameters:
annotationItem:

Chart Annotation

| any

The annotation's configuration object.

Return Value:

Object

The tooltip's text or markup and appearance settings.

Default Value: undefined
Cannot be used in themes.

Set this option to a function that returns an object with the following fields:

  • color
    Specifies the color that fills the tooltip.

  • text
    Specifies the tooltip's text.

  • html
    Specifies the HTML markup the tooltip displays.

    NOTE
    If you are going to use external resources (for example, images) in the markup, specify the size of the area they occupy.
  • fontColor
    Colors the tooltip's text.

  • borderColor
    Colors the tooltip's border.

NOTE
As an alternative to the function’s parameter you can use the this keyword.
See Also

description

Specifies the annotation's description displayed in the tooltip.

Type:

String

Default Value: undefined

font

Specifies the annotation's font options. Applies only to text annotations.

Type:

Object

height

Specifies the annotation's height in pixels.

Type:

Number

Default Value: undefined

image

Configures the image to be displayed in the annotation. Applies only if the type is "image".

Type:

String

|

Object

To display an image, assign its URL to the url option. Use the height and width options to resize the image if needed. Otherwise, you can assign the URL directly to the image option.

View Demo

opacity

Specifies the annotation's opacity.

Type:

Number

Default Value: 0.9

This option accepts a value from 0 to 1: 0 makes the annotation transparent; 1 makes it opaque.

paddingLeftRight

Along with paddingTopBottom, generates an empty space around the annotation's text or image; specified in pixels.

Type:

Number

Default Value: 10

paddingTopBottom

Along with paddingLeftRight, generates an empty space around the annotation's text or image; specified in pixels.

Type:

Number

Default Value: 10

series

Anchors the annotation to a series point. Accepts the name of the point's series.

Type:

String

Default Value: undefined

Use this option when the annotation is positioned relative to an argument.

For example, the following chart displays two series and an annotation. The annotation is positioned relative to the argument B but not anchored to any of the two series points that correspond to this argument:

dataSource: [
    { arg: "A", val1: 5, val2: 5.5 },
    { arg: "B", val1: 3, val2: 6.5 },
    { arg: "C", val1: 3.5, val2: 4.5 }
],
series: [
    { valueField: "val1", name: "Series 1" },
    { valueField: "val2", name: "Series 2" }
],
annotations: [{
    type: "text",
    text: "Text annotation",
    argument: "B"
}]

DevExtreme Chart: Positioning an annotation relative to an argument

To anchor the annotation to one of these series points, specify the annotation's series. For instance, the following code anchors the annotation to the point of Series 1:

annotations: [{
    type: "text",
    text: "Text annotation",
    argument: "B",
    series: "Series 1"
}]

DevExtreme Chart: An annotation anchored to a series point

See Also

shadow

Configures the annotation's shadows.

Type:

Object

text

Specifies the annotation's text. Applies only if the type is "text".

Type:

String

Default Value: undefined
See Also

textOverflow

Specifies what to do with the annotation's text when it overflows the allocated space after applying wordWrap: hide, truncate it and display an ellipsis, or do nothing.

Type:

String

Default Value: 'ellipsis'
Accepted Values: 'ellipsis' | 'hide' | 'none'

Use the VizTextOverflow enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Ellipsis, Hide, and None.

tooltipEnabled

Specifies whether the annotation tooltip is enabled.

Type:

Boolean

Default Value: true

A tooltip is a miniature rectangle that appears when a user long-presses an annotation or hovers the mouse pointer over it.

DevExtreme Chart: Annotation Tooltip

The tooltip displays the contents of the description field or the text or markup returned from the customizeTooltip function. If the description is empty, and customizeTooltip returns nothing, the tooltip does not appear.

Tooltips for annotations and series points have the same appearance specified in the tooltip object. However, you can use the annotation's customizeTooltip function to give the annotation tooltip an individual look.

type

Specifies whether the annotation displays a text or an image. This is a required setting.

Type:

String

Default Value: undefined
Accepted Values: 'text' | 'image'

value

Positions the annotation relative to a value on the specified value axis.

Type:

Number

|

Date

|

String

Default Value: undefined
See Also

width

Specifies the annotation's width in pixels.

Type:

Number

Default Value: undefined

wordWrap

Specifies how to wrap the annotation's text if it does not fit into a single line.

Type:

String

Default Value: 'normal'
Accepted Values: 'normal' | 'breakWord' | 'none'

The following modes are available:

  • "normal"
    Text breaks only at allowed breakpoints (for example, a space between two words).

  • "breakWord"
    Words can be broken if there are no available breakpoints in the line.

  • "none"
    Word wrap is disabled.

If the text overflows the container even after word wrap, the widget applies the textOverflow option.

Use the VizWordWrap enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Normal, BreakWord, and None.

x

Along with y, positions the annotation's center at a specific pixel coordinate. (0, 0) is the upper left corner of the chart.

Type:

Number

Default Value: undefined
See Also

y

Along with x, positions the annotation's center at a specific pixel coordinate. (0, 0) is the upper left corner of the chart.

Type:

Number

Default Value: undefined
See Also