Highcharts Demo

author(s): Torstein Hønsi

by chaloisaza

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="char_box_orange" style="height: 400px"></div>

JavaScript

Highcharts.chart('char_box_orange', {
      chart: {
        type: 'column',
        backgroundColor: '#e8e8e8',
      },
      title: {
        text: 'World\'s largest cities per 2017'
      },
      xAxis: {
        type: 'category',
        visible: true,
        labels: {
          rotation: -90,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        },
        tickWidth: 0,
        minPadding: 0,
        maxPadding: 0
      },
      yAxis: {
        gridLineDashStyle: 'longdash',
        gridLineColor: '#828080',
        plotLines: [{
          color: 'red',
          width: 1,
          value: 17,
          label: {
            text: '',
            align: 'right',
            zIndex: 10
          }
        }]
      },
      legend: {
        enabled: false
      },
      
      tooltip: {
        pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
      },
      series: [{
        pointPadding: 0,
        groupPadding: 0,
        name: 'Population',
        data: [{
            name: 'ARGENTINA',
            y: 24.2,
            color: '#ff5738'
          },
          {
            name: 'BAHAMAS',
            y: 20.8,
            color: '#ff704c'
          },
          {
            name: 'BARBADOS',
            y: 14.9,
            color: '#ffa190'
          },
          {
            name: 'BELIZE',
            y: 13.7,
            color: '#ff5738'
          },
          {
            name: 'BOLIVIA',
            y: 13.1,
            color: '#ff704c'
          },
          {
            name: 'BRAZIL',
            y: 12.7,
            color: '#ffa190'
          },
          {
            name: 'CHILE',
            y: 12.4,
            color: '#ff5738'
          },
          {
            name: 'COLOMBIA',
            y: 12.2,
            color: '#ff704c'
          },
          {
            name: 'COSTA RICA',
            y: 12.0,
            color: '#ffa190'
          },
         ...