Color axis and data labels

author(s): Torstein Hønsi

by prateekbansal07

HTML

<script src="https://www.hilabsdiy.com/assets/Reports/js/redips-drag-min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/Reports/js/redips-table-min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/html2canvas.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/canvas2image.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/wordexport.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/filesaver.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/dom-to-image.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/libs/jquery-3.4.1.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/libs/jquery-ui.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/libs/jquery.idle/jquery.idle.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/js/libs/bootstrap.js"></script>
    <script src="https://www.hilabsdiy.com/assets/production/charts/d3.js?v=1212"></script>
    <script src="https://www.hilabsdiy.com/assets/production/charts/d3.layout.js?v=1212"></script>
    <script src="https://www.hilabsdiy.com/assets/production/charts/d3.v3.min.js?v=1212"></script>
    <script src="https://www.hilabsdiy.com/assets/production/charts/d3.parsets.js?v=1212"></script>
    <script src="https://www.hilabsdiy.com/assets/production/charts/lodash.min.js?v=1212"></script>
    <script src="https://www.hilabsdiy.com/assets/production/charts/d3.layout.cloud.js"></script>
    <script src="https://www.hilabsdiy.com/assets/production/queryBuilder/js/bootstrap-datepicker.js"></script>
    <script src="https://www.hilabsdiy.com/assets/production/queryBuilder/js/bootstrap-slider.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/production/queryBuilder/js/moment.min.js"></script>
    <script src="https://www.hilabsdiy.com/assets/production/queryBuilder/js/selectize.min.js"></script>
    <script...

CSS

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

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

JavaScript

var map_data = [];
                var countyData = [];
                var myvarx = "";
       
                // Create the chart
                Highcharts.mapChart('container', {
                    chart: {
                        map: 'countries/us/us-ga-all',
                        height: 515,
                    },
                    exporting: {
                        buttons: {
                            contextButton: {
                                menuItems: [
                                    'printChart',
                                    'separator',
                                    'downloadPNG',
                                    'downloadJPEG',
                                    'downloadPDF',
                                    'downloadSVG'
                                ]
                            }
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: ''
                    },

                    subtitle: {
                        text: ''
                    },

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

                    colorAxis: {
                        min: 0,
                        max: 100,
                        tickInterval: 25,
                        stops: [[0.3, '#cc0000'], [0.5, '#ff9999'], [1, '#F1EEF6']],
                        labels: {
                            format: '{value}%'
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        align: 'bottom',
                        x: 30,
                        y: 10,
                        floating: true,
                       ...