Angular Chart - commonAnnotationSettings

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:

$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonAnnotationSettings: {
            tooltipEnabled: false
        }
    });
});

<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 { }

<template>
    <DxChart ... >
        <DxCommonAnnotationSettings
            :tooltip-enabled="false"
        />
    </DxChart>
</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>

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

• customizeAnnotation

See Also

• offsetX | offsetY

See Also

• value
• series
• x | y

This option supports the following colors:

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

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.

See Also

• tooltipEnabled

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

The number assigned to this option specifies the shift in pixels. A negative number shifts the annotation to the left and a positive number shifts it to the right.

See Also

• allowDragging

The number assigned to this option specifies the shift in pixels. A negative number shifts the annotation up and a positive number shifts it down.

See Also

• allowDragging

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

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"
}]

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"
}]

See Also

• x | y
• value

See Also

• description

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

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

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.

View Demo

See Also

• argument
• x | y

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 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Normal, BreakWord, and None.

See Also

• argument | value

See Also

• argument | value