How to add state names to Highmaps?

June 12, 2024

I am working with Highcharts/Highmaps and I am trying to show the state names on US map. But I cannot figure out how to do this. I have added the required javascript file "https://code.highcharts.com/mapdata/countries/us/us-all.js" and it is still not showing the state names. Not sure what am I missing? Here is my code:

document.addEventListener('DOMContentLoaded', function() {
  Highcharts.mapChart('container', {
    chart: {
      map: 'countries/us/us-all'
    },
    title: {
      text: 'Highcharts Map of New Orleans with Pin Markers'
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    tooltip: {
      formatter: function() {
        return this.point.name; // Display point name (hotel name) in the tooltip
      }
    },
    xAxis: {
      visible: true, // Show the X axis
      title: {
        text: 'Hotels' // X axis title
      }
    },
    yAxis: {
      visible: false // Hide the Y axis
    },
    series: [{
      name: 'Basemap',
      borderColor: '#A0A0A0',
      nullColor: 'rgba(800, 800, 200, 0.3)',
      showInLegend: false
    }, {
      // Pin markers
      type: 'mappoint',
      name: 'Locations',
      color: Highcharts.getOptions().colors[1],
      data: [{
        name: 'Hotel1',
        lat: 29.951065,
        lon: -90.071533
      }, {
        name: 'Hotel2',
        lat: 29.960444,
        lon: -92.063652
      }],
      marker: {
        symbol: 'url(http://c.tadst.com/gfx/n/icon/icon-map-pin.png)'
      },
      dataLabels: {
        enabled: true,
        format: '',
        style: {
          display: 'none' // Hide data labels by default
        }
      },
    }],
    mapView: {
      zoom: -3.5, // Set the zoom level
      center: { // Set the center coordinates
        lat: 29.94968829051141,
        lon: -90.07649154825536
      }
    }
  });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>

<div id="container"></div>

>Solution :

To show state names you need to provide the dataLabels configuration to the series which contains the State data, something like this:

dataLabels: {
  enabled: true,
  format: '{point.name}',
  style: {
    width: '80px',
    textTransform: 'uppercase',
    fontWeight: 'normal',
    textOutline: 'none',
    color: '#888'
  }
},

Here’s the HighCharts documentation for this property.

And finally, here’s a full working example given your code above:

document.addEventListener('DOMContentLoaded', function() {
  Highcharts.mapChart('container', {
    chart: {
      map: 'countries/us/us-all'
    },
    title: {
      text: 'Highcharts Map of New Orleans with Pin Markers'
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    tooltip: {
      formatter: function() {
        return this.point.name; // Display point name (hotel name) in the tooltip
      }
    },
    xAxis: {
      visible: true, // Show the X axis
      title: {
        text: 'Hotels' // X axis title
      }
    },
    yAxis: {
      visible: false // Hide the Y axis
    },
    series: [{
      name: 'Basemap',
      borderColor: '#A0A0A0',
      nullColor: 'rgba(800, 800, 200, 0.3)',
      showInLegend: false,
      dataLabels: {
        enabled: true,
        format: '{point.name}',
        style: {
          width: '80px',
          textTransform: 'uppercase',
          fontWeight: 'normal',
          textOutline: 'none',
          color: '#888'
        }
      },
    }, {
      // Pin markers
      type: 'mappoint',
      name: 'Locations',
      color: Highcharts.getOptions().colors[1],
      data: [{
        name: 'Hotel1',
        lat: 29.951065,
        lon: -90.071533
      }, {
        name: 'Hotel2',
        lat: 29.960444,
        lon: -92.063652
      }],
      marker: {
        symbol: 'url(http://c.tadst.com/gfx/n/icon/icon-map-pin.png)'
      },
      dataLabels: {
        enabled: true,
        format: '',
        style: {
          display: 'none' // Hide data labels by default
        }
      },
    }],
    mapView: {
      zoom: -3.5, // Set the zoom level
      center: { // Set the center coordinates
        lat: 29.94968829051141,
        lon: -90.07649154825536
      }
    }
  });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>

<div id="container"></div>