ColorAxis and Legend Verical

by kzoon

HTML

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


<div id="container" style="max-width: 1000px"></div>

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-population-density.json', function(data) {

  // Initiate the chart
  Highcharts.mapChart('container', {

    chart: {
      plotBackgroundColor: '#4b96af'
    },


    legend: {
      layout: 'vertical',
      
      borderColor: 'black',
      //borderWidth: 1,

      //symbolWidth:50,
      symbolHeight: 300,
      align: 'left',
      //padding: 20,
      margin: 50,
      //Doesn't do shit:
      /*    itemStyle: {
                  fontSize: '20px',
              },
          */

    },

    colorAxis: {
      min: 1,
      max: 789,
      //tickAmount:5,
      tickPixelInterval: 100,


      labels: {
        style: {
          fontSize: '20px',

        }
      }
    },

    series: [{
      data: data,
      mapData: Highcharts.maps['custom/world'],
      joinBy: ['iso-a2', 'code'],
      name: 'Population density',
      states: {
        hover: {
          color: '#a4edba'
        }
      },
      tooltip: {
        valueSuffix: '/km²'
      }
    }]
  });
});