annotations[]

Specifies the annotation collection.

Annotations are containers for images, text blocks, and custom content that display additional information about the visualized data.

DevExtreme PieChart: Annotations

To create annotations, assign an array of objects to the annotations[] option. Each object configures an individual annotation. You can set each annotation's type option to "text", "image", or "custom". Depending on the type, specify the annotation's text, image, or template option:

jQuery
index.js
$(function() {
    $("#pieChart").dxPieChart({
        annotations: [{
            type: "text",
            text: "Annotation text"
        }, {
            type: "image",
            image: "http://image/url/myimage.png"
        }, {
            type: "custom",
            template: function(annotation) {
                const data = annotation.data;
                const $svg = $("<svg>");
                // ...
                // Customize the annotation's markup here
                // ...
                return $svg;
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pie-chart ... >
    <dxi-annotation
        type="text"
        text="Annotation text">
    </dxi-annotation>
    <dxi-annotation
        type="image"
        image="http://image/url/myimage.png">
    </dxi-annotation>
    <dxi-annotation
        type="custom"
        template="custom-annotation">
    </dxi-annotation>
    <svg *dxTemplate="let annotation of 'custom-annotation'">
        <!-- Declare custom SVG markup here -->
    </svg>
</dx-pie-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 { DxPieChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPieChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxPieChart ... >
        <DxAnnotation
            type="text"
            text="Annotation text"
        />
        <DxAnnotation
            type="image"
            image="http://image/url/myimage.png"
        />
        <DxAnnotation
            type="custom"
            template="custom-annotation"
        />
        <template #custom-annotation="{ data }">
            <svg>
                <!-- Declare custom SVG markup here -->
            </svg>
        </template>
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxAnnotation
} from 'devextreme-vue/pie-chart';

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

import PieChart, {
    Annotation
} from 'devextreme-react/pie-chart';

function CustomAnnotation(annotation) {
    const data = annotation.data;
    return (
        <svg>
            {/* Declare custom SVG markup here */}
        </svg>
    );
}

export default function App() {
    return (
        <PieChart ... >
            <Annotation
                type="text"
                text="Annotation text"
            />
            <Annotation
                type="image"
                image="http://image/url/myimage.png"
            />
            <Annotation
                type="custom"
                render={CustomAnnotation}
            />
        </PieChart>
    );
}

Annotations can be unattached or anchored to a chart element. The following list shows how to position them. Chart coordinates (argument and series) specify the element that the annotation's arrow points to; pixel coordinates (x and y) specify the position of the annotation's center.

  • Unanchored annotation

    annotations: [{
        x: 100,
        y: 200
    }]
  • Annotation anchored to a series point

    annotations: [{
        argument: "California",
        series: "States" // required if the PieChart contains more than one series
    }]
  • Annotation positioned at an argument's edge

    annotations: [{
        argument: "Alaska",
        series: "States",
        location: "edge"
    }]

The PieChart displays a tooltip when a user long-presses an annotation or hovers the mouse pointer over it.

Objects in the annotations[] array configure individual annotations. To specify options that apply to all annotations, use the commonAnnotationSettings object. Individual settings take precedence over common settings.

View Demo

See Also

allowDragging

Specifies whether users can drag and drop the annotation.

Type:

Boolean

Default Value: false

See Also

argument

Positions the annotation relative to a specific argument.

Type:

Number

|

Date

|

String

Default Value: undefined

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

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:

component

An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

customizeTooltip

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

Type:

Function

Function parameters:
annotation:

PieChart 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.

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

Field name Description
text The tooltip's text.
html The HTML markup displayed in a tooltip. To use external resources (for example, images) in the markup, specify the size of the area they occupy beforehand.
color The tooltip's color.
fontColor The color of the tooltip's text.
borderColor The color of the tooltip's border.
NOTE
As an alternative to the function’s parameter you can use the this keyword.
See Also

data

A container for custom data.

Type:

Object

description

Specifies the annotation's description in the tooltip.

Type:

String

Default Value: undefined

font

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

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 and use the height and width options to resize the image. Otherwise, assign the URL directly to the image option.

View Demo

location

Specifies an annotation's position on the surface of a specific argument.

Type:

String

Default Value: 'center'
Accepted Values: 'center' | 'edge'

name

Specifies the annotation's name.

Type:

String

Default Value: undefined

offsetX

Moves the annotation horizontally.

Type:

Number

Default Value: undefined

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

offsetY

Moves the annotation vertically.

Type:

Number

Default Value: undefined

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

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

Used with paddingTopBottom to generate 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

render

An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

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 and the PieChart contains more than one series.

See Also

shadow

Configures the annotation's shadows.

Type:

Object

template

Specifies a custom template for the annotation. Applies only if the type is "custom".

Type:

template

Template Data:

Object

| any

The annotation's configuration object.

Default Name: undefined

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

tooltipComponent

An alias for the tooltipTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

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 PieChart: 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 as specified in the tooltip object. You can use the annotation's customizeTooltip function to customize the annotation tooltip.

tooltipRender

An alias for the tooltipTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

tooltipTemplate

Specifies a custom template for an annotation's tooltip.

Type:

template

Template Data:

PieChart Annotation

| any

The annotation's configuration object.

Default Name: undefined

type

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

Type:

String

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

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

x

Used with y to position the annotation's center at a specific pixel coordinate. (0, 0) is the upper left corner of the widget.

Type:

Number

Default Value: undefined

y

Used with x to position the annotation's center at a specific pixel coordinate. (0, 0) is the upper left corner of the widget.

Type:

Number

Default Value: undefined