A vector map widget.

Included in: dx.chartjs.js, dx.all.js

The dxVectorMap widget is designed to visualize data connected with a geographical location. This widget represents a map that contains areas and markers. The map areas usually reflect geographical regions, such as countries, continents, etc., while the map markers are used to flag certain points on the map, e.g., towns, cities or capitals.

The dxVectorMap widget, like any other DevExtreme data visualization widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxVectorMap widget within the "mapContainer" container using the jQuery approach.

  $(function () {
      //Options of the configuration object are specified here

To configure the dxVectorMap widget, pass a configuration object as the parameter of the constructor. The fields of this object represent the widget configuration options. To specify these options, set the required values to corresponding fields. Refer to the Configuration section to find the options that can be specified for the dxVectorMap widget.

Start Tutorial View Demo Watch Video

See Also

To learn the widget's concepts and overview features, refer to the Vector Map section within the Data Visualization Guides.


An object that specifies configuration options for the dxVectorMap widget.


This section describes the methods that can be used in code to manipulate objects related to the dxVectorMap widget.


This section describes events fired by the widget.

Map Elements

This section lists the methods and fields of the map elements.