Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

var numberOfPoints = 37,
  i = 1,
  data = [];

for (; i < numberOfPoints; i++) {
  var category = i,
    index;

  if (!((i - 1) % 5)) {
    category = 'YEAR' + ((i - 1) / 5 + 1);
  }

  data.push({
    y: i * 800,
    name: category
  });
}

Highcharts.chart('container', {
  chart: {
    type: 'column',
    backgroundColor: '#2e332f',
    events: {
      load: function() {
        var chart = this,
          points = chart.series[0].points;

        points.forEach(function(point, index) {
          if (index > points.length - 5) {
            point.update({
              color: '#4d4d4d'
            });
          }
        });
      }
    }
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  xAxis: {
    type: 'category',
    tickWidth: 0,
    labels: {
      step: 1,
      style: {
        color: ' #bdc1be'
      },
      formatter: function() {
        if (typeof this.value === 'string') {
          return this.value;
        }
      }
    }
  },
  yAxis: {
    tickInterval: 5000,
    gridLineColor: '#646865',
    title: {
      text: ''
    },
    labels: {
      style: {
        color: ' #bdc1be'
      },
      format: '{value}'
    }
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      color: {
        linearGradient: [0, 0, 500, 0],
        stops: [
          [0, '#0f755f'],
          [1, '#0a9b3b']
        ]
      }
    }
  },
  series: [{
    data: data
  }]
});