React
Demos
Support
Forum
Download
Search results

Data Labels

Data labels are used to display information about shapes such as country, state, and city, and the data label templates are used to customize the appearance of labels or display additional information about shapes.

Display labels from shape data

To enable the data label feature, set the dataLabelSettings.visible property to true. The field name that contains data label text should be given as value to the dataLabelSettings.labelPath property.

Source
Preview
index.tsx
index.jsx
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';

ReactDOM.render(
            <MapsComponent id="maps">
            <Inject services={[DataLabel]} />
                <LayersDirective>
                    <LayerDirective shapeData={world_map}
                     dataLabelSettings={ {
                            visible: true,
                            labelPath: 'name',
                        } }>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>,
document.getElementById("maps") as HTMLElement
);
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
            <Inject services={[DataLabel]}/>
                <LayersDirective>
                    <LayerDirective shapeData={world_map} dataLabelSettings={{
    visible: true,
    labelPath: 'name',
}}>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>, document.getElementById("maps"));

Customize data labels using template

The dataLabelSettings.template property takes the id of the template element as value. You can also specify the element as a string and assign it to the dataLabelSettings.template property.

Source
Preview
index.tsx
index.jsx
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';

ReactDOM.render(
            <MapsComponent id="maps">
            <Inject services={[DataLabel]} />
                <LayersDirective>
                    <LayerDirective shapeData={world_map}
                     dataLabelSettings={ {
                            visible: true,
                            labelPath: 'name',
                            template: '<div>{{:name}}</div>'
                        } }>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>,
document.getElementById("maps") as HTMLElement
);
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
            <Inject services={[DataLabel]}/>
                <LayersDirective>
                    <LayerDirective shapeData={world_map} dataLabelSettings={{
    visible: true,
    labelPath: 'name',
    template: '<div>{{:name}}</div>'
}}>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>, document.getElementById("maps"));

Avoid overlapping of labels

The dataLabelSettings.intersectionAction property is used to trim or hide the labels that overlap with other labels, and the dataLabelSettings.smartLabelMode property is used to trim or hide the labels that exceed the actual size of their shapes.

Source
Preview
index.tsx
index.jsx
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';

ReactDOM.render(
            <MapsComponent id="maps">
            <Inject services={[DataLabel]} />
                <LayersDirective>
                    <LayerDirective shapeData={world_map}
                     dataLabelSettings={ {
                            visible: true,
                            labelPath: 'name',
                            smartLabelMode: 'Trim',
                            interSectAction: 'Trim'
                        } }>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>,
document.getElementById("maps") as HTMLElement
);
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
            <Inject services={[DataLabel]}/>
                <LayersDirective>
                    <LayerDirective shapeData={world_map} dataLabelSettings={{
    visible: true,
    labelPath: 'name',
    smartLabelMode: 'Trim',
    interSectAction: 'Trim'
}}>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>, document.getElementById("maps"));

Refer the API for Datalabel feature.

Previous
Next