JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script src="https://github.highcharts.com/feature/maps-a11y/highcharts.js"></script>
<script src="https://github.highcharts.com/feature/maps-a11y/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="https://github.highcharts.com/feature/maps-a11y/modules/exporting.js"></script>
<script src="https://github.highcharts.com/feature/maps-a11y/modules/export-data.js"></script>
<script src="https://github.highcharts.com/feature/maps-a11y/modules/accessibility.js"></script>
<script src="https://github.highcharts.com/feature/maps-a11y/modules/data-filter.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Map showing per state population data for the USA. The map is
        demonstrating some accessibility features of Highmaps, including
        data filtering.
    </p>
</figure>

CSS

#container {
    height: 420px; 
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 350px;
    font-family: Verdana, sans-serif;
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var data = [
    ['California', 39937489],
    ['Texas', 29472295],
    ['Florida', 21992985],
    ['New York', 19440469],
    ['Pennsylvania', 12820878],
    ['Illinois', 12659682],
    ['Ohio', 11747694],
    ['Georgia', 10736059],
    ['North Carolina', 10611862],
    ['Michigan', 10045029],
    ['New Jersey', 8936574],
    ['Virginia', 8626207],
    ['Washington', 7797095],
    ['Arizona', 7378494],
    ['Massachusetts', 6976597],
    ['Tennessee', 6897576],
    ['Indiana', 6745354],
    ['Missouri', 6169270],
    ['Maryland', 6083116],
    ['Wisconsin', 5851754],
    ['Colorado', 5845526],
    ['Minnesota', 5700671],
    ['South Carolina', 5210095],
    ['Alabama', 4908621],
    ['Louisiana', 4645184],
    ['Kentucky', 4499692],
    ['Oregon', 4301089],
    ['Oklahoma', 3954821],
    ['Connecticut', 3563077],
    ['Utah', 3282115],
    ['Iowa', 3179849],
    ['Nevada', 3139658],
    ['Arkansas', 3038999],
    ['Mississippi', 2989260],
    ['Kansas', 2910357],
    ['New Mexico', 2096640],
    ['Nebraska', 1952570],
    ['Idaho', 1826156],
    ['West Virginia', 1778070],
    ['Hawaii', 1412687],
    ['New Hampshire', 1371246],
    ['Maine', 1345790],
    ['Montana', 1086759],
    ['Rhode Island', 1056161],
    ['Delaware', 982895],
    ['South Dakota', 903027],
    ['North Dakota', 761723],
    ['Alaska', 734002],
    ['Vermont', 628061],
    ['Wyoming', 567025]
];


var chart = Highcharts.mapChart('container', {
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {xDescription}, {value}.'
        }
    },

    dataFilter: {
        keys: {
            name: 'State name',
            'properties.postal-code': 'State code',
            value: 'Population number'
        }
    },

    chart: {
        map: 'countries/us/us-all'
    },

    title: {
        text: 'Population per state'
    },

    subtitle: {
        text: 'Source: US Census Bureau 2020 estimates'
    },

    mapNavigation: {
        enabled: true
    },

   ...