Milestone Trendanalysis with Highcharts

Question

Is it possible to make the following chart with Highcharts library?

It's a simple line chart but with inverted triangle shaped grid. Is there any predefined type or a way to customize the grid shape? Any pointers which will guide me to a proper direction would help. Thank you!

Answer 1

Another method of how to create this type of chart:

Demo

Highcharts.chart('container', {

  chart: {
    width: 500,
  },
  xAxis: {
    opposite: true,
    title: {
      text: 'Report Date'
    },
    gridLineWidth: 1,
    type: 'datetime',
    categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
    tickmarkPlacement: 'on',
    labels: {
      rotation: -90,
      y: -18
    },
    offset: -13,
    lineWidth: 0,
    max: 8.6,
  },
  legend: {
    enabled: false
  },
  yAxis: {
    title: {
      text: 'Milestones'
    },
    categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
    tickmarkPlacement: 'on',
    gridLineWidth: 1,
    tickPosition: 'inside',
    min: 0,
    minPadding: 0,
    startOnTick: false
  },

  series: [{
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    marker: {
      enabled: false
    },
    color: 'grey',
    enableMouseTracking: false,
    animation: false
  }, {
    data: [6, 6, 6, 7, 8, 7, 7, 8, 8.5, 9]
  }, {
    data: [5, 5, 5, 6, 6.5, 6, 6.5, 7.5, 8]
  }, {
    data: [4, 4, 4, 5, 5.5, 5.5, 6]
  }, {
    data: [2, 2.5, 2.5, 3.5, 4]
  }, {
    data: [1, 1.5, 2]
  }, {
    type: 'arearange',
    data: [[0, 0, -5], [9.2, 9, -5]],
    color: 'white',
    fillOpacity: 1,
    marker: {
      enabled: false
    },
    zIndex: -1,
    enableMouseTracking: false,
    animation: false
  }]
});