Vue VectorMap - commonAnnotationSettings

Specifies settings common for all annotations in the VectorMap.

Selector: DxCommonAnnotationSettings
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() {
    $("#vectorMap").dxVectorMap({
        // ...
        commonAnnotationSettings: {
            tooltipEnabled: false
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-vector-map ... >
    <dx-common-annotation-settings
        [tooltipEnabled]="false">
    </dx-common-annotation-settings>
</dx-vector-map>
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 { DxVectorMapModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxVectorMapModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxVectorMap ... >
        <DxCommonAnnotationSettings
            :tooltip-enabled="false"
        />
    </DxVectorMap>
</template>

<script>
import DxVectorMap, {
    DxCommonAnnotationSettings
} from 'devextreme-vue/vector-map';

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

import VectorMap, {
    CommonAnnotationSettings
} from 'devextreme-react/vector-map';

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

View Demo

See Also

allowDragging

Specifies whether users can drag and drop the annotation.

Selector: allow-dragging
Type:

Boolean

Default Value: false

See Also

arrowLength

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

Selector: arrow-length
Type:

Number

Default Value: 14

arrowWidth

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

Selector: arrow-width
Type:

Number

Default Value: 14

DevExtreme Chart: Annotation Arrow

border

Configures the appearance of the annotation's border.

Selector: DxBorder
Type:

Object

color

Specifies the color that fills the annotation.

Type:

String

Default Value: '#ffffff'

This property supports the following colors:

coordinates

Positions the annotation's center at specified geographic coordinates: [longitude, latitude].

Type:

Array<Number>

Default Value: undefined

See Also

customizeTooltip

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

Selector: customize-tooltip
Type:

Function

| undefined
Function parameters:
annotation:

VectorMap 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 property 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.
The VectorMap evaluates the markup. Make sure that it does not contain malicious code. Refer to the following help topic for more information: Potentially Vulnerable API - customizeTooltip.
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: any

description

Specifies the annotation's description in the tooltip.

Type:

String

| undefined
Default Value: undefined

font

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

Selector: DxFont
Type:

Object

height

Specifies the annotation's height in pixels.

Type:

Number

| undefined
Default Value: undefined

image

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

Selector: DxImage
Type:

String

|

Object

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

offsetX

Moves the annotation horizontally.

Selector: offset-x
Type:

Number

| undefined
Default Value: undefined

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

offsetY

Moves the annotation vertically.

Selector: offset-y
Type:

Number

| undefined
Default Value: undefined

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

opacity

Specifies the annotation's opacity.

Type:

Number

Default Value: 0.9

This property 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).

Selector: padding-left-right
Type:

Number

Default Value: 10

paddingTopBottom

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

Selector: padding-top-bottom
Type:

Number

Default Value: 10

shadow

Configures the annotation's shadows.

Selector: DxShadow
Type:

Object

template

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

Type:

template

| undefined
Function parameters:
annotation:

VectorMap Annotation

| any

The annotation's configuration object.

element:

SVGGElement

A container for the template content.

Return Value:

String

|

SVGElement

|

jQuery

One of the following:

  • HTML markup as a string
  • A DOM node
  • A DOM node wrapped in a jQuery element
Default Value: undefined
jQuery
index.js
$(function() {
    $("#vectorMap").dxVectorMap({
        annotations: [{
            // ...
            type: "custom",
            template: function(annotation) {
                const data = annotation.data;
                const $svg = $("<svg>");
                // ...
                // Customize the annotation's markup here
                // ...
                return $svg;
            }
        }]
    });
});
Angular
app.component.html
<dx-vector-map ... >
    <dxi-annotation ...
        type="custom"
        template="custom-annotation">
    </dxi-annotation>
    <svg *dxTemplate="let annotation of 'custom-annotation'">
        <!-- Declare custom SVG markup here -->
    </svg>
</dx-vector-map>
Vue
App.vue
<template>
    <DxVectorMap ... >
        <DxAnnotation ...
            type="custom"
            template="custom-annotation"
        />
        <template #custom-annotation="{ data }">
            <svg>
                <!-- Declare custom SVG markup here -->
            </svg>
        </template>
    </DxVectorMap>
</template>

<script>
import DxVectorMap, {
    DxAnnotation
} from 'devextreme-vue/vector-map';

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

import VectorMap, {
    Annotation
} from 'devextreme-react/vector-map';

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

export default function App() {
    return (
        <VectorMap ... >
            <Annotation ...
                type="custom"
                render={CustomAnnotation}
            />
        </VectorMap>
    );
}

text

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

Type:

String

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

Selector: text-overflow
Type:

TextOverflow

Default Value: 'ellipsis'

tooltipEnabled

Specifies whether the annotation tooltip is enabled.

Selector: tooltip-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 VectorMap: 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.

tooltipTemplate

Specifies a custom template for an annotation's tooltip.

Selector: tooltip-template
Type:

template

| undefined
Function parameters:
annotation:

VectorMap Annotation

| any

The annotation's configuration object.

element:

HTMLElement | jQuery

The tooltip's container. It is an HTML Element or a jQuery Element when you use jQuery.

Return Value:

String

|

Element

|

jQuery

One of the following:

  • HTML markup as a string
  • A DOM node
  • A DOM node wrapped in a jQuery element
Default Value: undefined

type

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

Type:

AnnotationType

| undefined
Default Value: undefined

View Demo

width

Specifies the annotation's width in pixels.

Type:

Number

| undefined
Default Value: undefined

wordWrap

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

Selector: word-wrap
Type:

WordWrap

Default Value: 'normal'

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.

x

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

Type:

Number

| undefined
Default Value: undefined

See Also

y

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

Type:

Number

| undefined
Default Value: undefined

See Also