HelpBot Assistant

How can I help you?

Data label in React Maps component

6 Feb 202624 minutes to read

Data labels display information about map shapes. Enable data labels by setting the visible property of the dataLabelSettings to true.

Adding data labels

To display data labels, specify the field name containing the label text in the labelPath property of dataLabelSettings must be used. The value of the labelPath. The field can come from either the shape data or the layer data source.

The following example sets labelPath from a field in the shape data.

import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={usa_map}
                                shapeSettings= { {
                                    autofill: true
                                } }
                               dataLabelSettings={ {
                                   visible: true,
                                   labelPath: 'name'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={usa_map}
                                shapeSettings= { {
                                    autofill: true
                                } }
                               dataLabelSettings={ {
                                   visible: true,
                                   labelPath: 'name'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

In the following example, the value of labelPath property is set from the field name in the data source of the layer settings.

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';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapePropertyPath="name" shapeDataPath="name"
                                shapeSettings= { {
                                    autofill: true
                                } }
                                dataSource ={ [
                                    { "name": "Afghanistan", "value": 53, "countryCode": "AF", "population": "29863010", "color": "red", "density": "119", "continent": "Asia" },
                                    { "name": "Albania", "value": 117, "countryCode": "AL", "population": "3195000", "color": "Blue", "density": "111", "continent": "Europe" },
                                    { "name": "Algeria", "value": 15, "countryCode": "DZ", "population": "34895000", "color": "Green", "density": "15", "continent": "Africa" }
                                ] }
                                dataLabelSettings={ {
                                    visible: true,
                                    labelPath: 'continent',
                                    smartLabelMode: 'Trim'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
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';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapePropertyPath="name" shapeDataPath="name"
                                shapeSettings= { {
                                    autofill: true
                                } }
                                dataSource ={ [
                                    { "name": "Afghanistan", "value": 53, "countryCode": "AF", "population": "29863010", "color": "red", "density": "119", "continent": "Asia" },
                                    { "name": "Albania", "value": 117, "countryCode": "AL", "population": "3195000", "color": "Blue", "density": "111", "continent": "Europe" },
                                    { "name": "Algeria", "value": 15, "countryCode": "DZ", "population": "34895000", "color": "Green", "density": "15", "continent": "Africa" }
                                ] }
                                dataLabelSettings={ {
                                    visible: true,
                                    labelPath: 'continent',
                                    smartLabelMode: 'Trim'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Customization

Customize data label appearance using the following properties in dataLabelSettings.

  • border - To customize the color, width and opacity for the border of the data labels in Maps.
  • fill - To apply the color of the data labels in Maps.
  • opacity - To customize the transparency of the data labels in Maps.
  • textStyle - To customize the text style of the data labels in Maps.
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel, MapsTooltip } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel, MapsTooltip]} />
           <LayersDirective>
               <LayerDirective shapeData={usa_map}
                                shapeSettings= 
                                dataLabelSettings={ {
                                   visible: true,
                                   smartLabelMode: 'Hide',
                                   intersectionAction: 'Trim',
                                   labelPath: 'name',
                                   border: {
                                       color: 'green',
                                       width: 2
                                   },
                                   fill: 'transparent',
                                   opacity: 0.9,
                                   textStyle: {
                                       size: '17px',
                                       fontStyle: 'Sans-serif',
                                       fontWeight: 'normal'
                                   }
                                } }
                                tooltipSettings= >
               </LayerDirective>
        </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel, MapsTooltip } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel, MapsTooltip]} />
           <LayersDirective>
               <LayerDirective shapeData={usa_map}
                                shapeSettings= 
                                dataLabelSettings={ {
                                   visible: true,
                                   smartLabelMode: 'Hide',
                                   intersectionAction: 'Trim',
                                   labelPath: 'name',
                                   border: {
                                       color: 'green',
                                       width: 2
                                   },
                                   fill: 'transparent',
                                   opacity: 0.9,
                                   textStyle: {
                                       size: '17px',
                                       fontStyle: 'Sans-serif',
                                       fontWeight: 'normal'
                                   }
                                } }
                                tooltipSettings= >
               </LayerDirective>
        </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Label animation

Animate data labels during initial rendering by setting the animationDuration property in the dataLabelSettings. Specify the duration in milliseconds.

import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel, MapsTooltip } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel, MapsTooltip]} />
           <LayersDirective>
               <LayerDirective shapeData={usa_map}
                                shapeSettings= 
                                dataLabelSettings={ {
                                   visible: true,
                                   smartLabelMode: 'Hide',
                                   intersectionAction: 'Trim',
                                   labelPath: 'name',
                                   animationDuration: 2000
                                } }
                                tooltipSettings= >
               </LayerDirective>
        </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel, MapsTooltip } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel, MapsTooltip]} />
           <LayersDirective>
               <LayerDirective shapeData={usa_map}
                                shapeSettings= 
                                dataLabelSettings={ {
                                   visible: true,
                                   smartLabelMode: 'Hide',
                                   intersectionAction: 'Trim',
                                   labelPath: 'name',
                                   animationDuration: 2000
                                } }
                                tooltipSettings= >
               </LayerDirective>
        </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Smart labels

Control label behavior when labels exceed shape boundaries using the smartLabelMode property.

The following modes are available:

  • None - It specifies that no action is taken, when a label exceeds the shape’s region.
  • Hide - It specifies to hide the labels, when it exceeds the shape’s region.
  • Trim - It specifies to trim the labels, when it exceeds the shape’s region.
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={usa_map}
                                shapeSettings= { {
                                    autofill: true
                                } }
                                dataLabelSettings={ {
                                    visible: true,
                                    labelPath: 'name',
                                    smartLabelMode: 'Hide'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={usa_map}
                                shapeSettings= { {
                                    autofill: true
                                } }
                                dataLabelSettings={ {
                                    visible: true,
                                    labelPath: 'name',
                                    smartLabelMode: 'Hide'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Intersect action

Control label behavior when labels overlap with other labels using the intersectionAction property. The following options are available:

  • None - It specifies that no action is taken, when the labels intersect.
  • Hide - It specifies to hide the labels when they intersect.
  • Trim - It specifies to trim the labels when they intersect.
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={usa_map}
                                shapeSettings= { {
                                    autofill: true
                                } }
                                dataLabelSettings= { {
                                    visible: true,
                                    labelPath: 'name',
                                    intersectionAction: 'Trim'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                <LayerDirective shapeData={usa_map}
                                shapeSettings= { {
                                    autofill: true
                                } }
                                dataLabelSettings= { {
                                    visible: true,
                                    labelPath: 'name',
                                    intersectionAction: 'Trim'
                                } }>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Adding data label as a template

Add custom HTML elements as data label templates using the template property of dataLabelSettings is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.

The smartLabelMode, intersectionAction, animationDuration, border, fill, opacity, and textStyle properties do not apply to templates. Apply styles to label templates using standard CSS for HTML elements.

import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                    <LayerDirective shapeData={usa_map}
                                    shapeSettings= 
                                    dataLabelSettings={ {
                                        visible: true,
                                        labelPath:'Name',
                                        template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div> ${name}</img></div>'
                                    } }>
                    </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
    return(
        <MapsComponent >
        <Inject services={[DataLabel]} />
            <LayersDirective>
                    <LayerDirective shapeData={usa_map} 
                                    shapeSettings= 
                                    dataLabelSettings={ {
                                        visible: true,
                                        labelPath:'Name',
                                        template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div> ${name}</img></div>'
                                    } }>
                    </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);