California - Highcharts Maps

Highcharts Maps demo

by prateekbansal07

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>

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

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/countries/us/us-ca-all.topo.json'
    ).then(response => response.json());

    // Prepare demo data. The data is joined to map using value of 'hc-key'
    // property by default. See API docs for 'joinBy' for more info on linking
    // data and map.
    const data = [['us-ca-083',33],['us-ca-111',33],['us-ca-071',33],['us-ca-115',5],['us-ca-101',5],['us-ca-031',5],['us-ca-053',33],['us-ca-057',5],['us-ca-059',75],['us-ca-065',33],['us-ca-073',75],['us-ca-041',33],['us-ca-075',75],['us-ca-095',33],['us-ca-097',33],['us-ca-055',33],['us-ca-013',33],['us-ca-077',33],['us-ca-035',5],['us-ca-067',33],['us-ca-017',5],['us-ca-099',33],['us-ca-061',33],['us-ca-089',5],['us-ca-109',5],['us-ca-039',5],['us-ca-069',5],['us-ca-047',5],['us-ca-079',5],['us-ca-011',5],['us-ca-007',5],['us-ca-081',33],['us-ca-087',33],['us-ca-085',33],['us-ca-029',33],['us-ca-005',5],['us-ca-113',33],['us-ca-033',5],['us-ca-045',5],['us-ca-103',5],['us-ca-023',5],['us-ca-093',5],['us-ca-027',5],['us-ca-001',33],['us-ca-037',75],['us-ca-025',5],['us-ca-021',5],['us-ca-107',5],['us-ca-019',33],['us-ca-015',5],['us-ca-051',5]];

    // Create the chart
    Highcharts.mapChart('container', {
        chart: {
            map: topology
        },
credits:{
enabled:false
},
        title: {
            text: ''
        },

        subtitle: {
            text: ''
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

       colorAxis: {
                        min: 0,
                        max: 100,
                        tickInterval: 20,
                        stops: [[0.3,'#F1EEF6' ],[0.6,'#FF0000'],[1,'#750000']],
                        labels: {
                            format: '{value}%'
                        }
                    },
                    legend: {
                       ...