Grid Axis demo

by YameenYasin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
  max-width: 800px;
  min-width: 400px;
  height: 400px;
  margin: 1em auto;
}

JavaScript

// THE CHART
Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Vertical Axis.grid'
  },

  yAxis: [{
    grid: {
      borderColor: '#3a5d96',
      columns: [{
        title: {
          text: 'Name',
          y: 5,
          x: 5,
        },
        labels: {
          formatter: function() {
            var point = this.point,
              name = point.name;
            return name;
          }
        }
      }, {
        title: {
          text: 'Duration',
        },
        labels: {
          formatter: function() {
            var point = this.point,
              days = (1000 * 60 * 60 * 24),
              number = (point.end - point.start) / days;
            return Math.round(number * 100) / 100;
          }
        }
      }]
    }
  }],
  series: [{
    name: 'Project 1',
    data: [{
      name: 'New offices',
      id: 'new_offices',
      owner: 'Peter'
    }, {
      name: 'Prepare office building',
      id: 'prepare_building',
      parent: 'new_offices',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 25),
      completed: {
        amount: 0.2
      },
      owner: 'Linda'
    }, {
      name: 'Parent item',
      id: 'Parent',
      dependency: 'prepare_building',
      parent: 'new_offices',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29),
      owner: 'Ivy'
    }, {
      name: 'Subitem',
      id: 'passed_inspection',
      dependency: 'inspect_building',
      parent: 'Parent',
      start: Date.UTC(2014, 10, 23),
      end: Date.UTC(2014, 10, 30),
      milestone: true,
      owner: 'Peter'
    }]
  }]
});