label font

Specifies font options for marker labels.

Type: Object

Show Example:
jQuery

In this example, several font options of marker labels are changed.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    color: 'midnightblue',
                    family: 'Verdana',
                    opacity: 0.9,
                    weight: 100,
                    size: 11
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

color

Specifies a font color for marker labels.

Type: String
Default Value: '#2b2b2b'

This option supports the following colors.

Show Example:
jQuery

In this example, the font color of marker labels is set to 'green' using the color option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    color: 'green'
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

family

Specifies a font family for marker labels.

Type: String
Default Value: ''Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana'

For details on acceptable values, refer to the Font family article.

Show Example:
jQuery

In this example, the font family of marker labels is changed using the family option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    family: 'Helvetica Neue'
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

opacity

Specifies a font opacity for marker labels.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the font opacity of marker labels is specified using the opacity option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    opacity: 0.8
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

size

Specifies a font size for marker labels.

Type: Number|String
Default Value: 12

For details on acceptable values, refer to the Font size article.

Show Example:
jQuery

In this example, the font size of marker labels is set to 9 using the size option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    size: 9
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

weight

Specifies a font weight for marker labels.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, the font weight of marker labels is set to 700 using the weight option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    weight: 700
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});