JavaScript/jQuery PolarChart - annotations

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

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

$(function() {
    $("#polarChart").dxPolarChart({
        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;
            }
        }]
    });
});

<dx-polar-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-polar-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 { DxPolarChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPolarChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxPolarChart ... >
        <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>
    </DxPolarChart>
</template>

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

export default {
    components: {
        DxPolarChart,
        DxAnnotation
    },
    data() {
        // ...
    }
}
</script>

import React from 'react';

import PolarChart, {
    Annotation
} from 'devextreme-react/polar-chart';

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

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

Annotations can be anchored to a PolarChart element. The following list shows how to position them. Chart coordinates (argument, value and series properties) specify the element that the annotation's arrow points to; pixel coordinates (x and y) specify the position of the annotation's center. You can also use polar coordinate system (angle and radius properties) to create unanchored annotations.

• Unanchored annotation

  annotations: [{
      x: 100,
      y: 200
  }, {
      angle: 45,
      radius: 100
  }]

• Annotation anchored to a polar chart coordinate

  annotations: [{
      argument: new Date(2019, 1, 16),
      value: 15
  }]

• Annotation anchored to a series point

  annotations: [{
      argument: new Date(2019, 1, 16),
      series: "Series 1"
  }]

• Annotation displayed on an axis

  annotations: [{ 
      // An annotation on the argument axis 
      argument: new Date(2019, 1, 16)
  }, { 
      // An annotation on the value axis 
      value: 15
  }]

• Mixed anchoring (pixel and chart coordinates used simultaneously)

  annotations: [{
      argument: new Date(2019, 1, 16),
      y: 200
  }]

When a user long-presses an annotation or hovers the mouse pointer over it, the PolarChart displays a tooltip.

Objects in the annotations[] array configure individual annotations. To specify properties common for all annotations, use the commonAnnotationSettings object. Individual settings take precedence over common settings.

View Demo

See Also

• customizeAnnotation

See Also

• offsetX | offsetY

The following image illustrates the position of the annotation when the angle is 45 and radius is 110:

See Also

• value
• series
• x | y

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 should be assigned a function that returns an object with the following fields:

See Also

• tooltipEnabled

To display an image, assign its URL to the url property and use the height and width properties to resize the image. Otherwise, assign the URL directly to the image property.

View Demo

The number assigned to this property 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 property specifies the shift in pixels. A negative number shifts the annotation up and a positive number shifts it down.

See Also

• allowDragging

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

See Also

• angle

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

For example, the following PolarChart fragment 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. To anchor the annotation to a series point, specify the annotation's series property:

dataSource: [
    { arg: "A", val1: 21, val2: 10 },
    { arg: "B", val1: 26, val2: 11 },
    { arg: "C", val1: 14, val2: 5 }
],
series: [
    { valueField: "val1", name: "Series 1" },
    { valueField: "val2", name: "Series 2" }
],
annotations: [{
    type: "text",
    text: "Text annotation",
    argument: "B",
    // series: "Series 1"
}]    

See Also

• x | y
• value

See Also

• description

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

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 UI component applies the textOverflow property.

See Also

• argument | value

See Also

• argument | value