title: Making a timeline in Highcharts
body: <p>I am looking to make a timeline in Highcharts using the current stable build. I know that Gantt chart is under development but it has been in Alpha for a long time now and I am looking at using something that is stable. There is a related <a href="https://stackoverflow.com/questions/41717285/timeline-schedule-in-highcharts">question</a> but the fiddles in that question are not working anymore. Moreover I am integrating this in my Angular 4 project using <a href="https://github.com/gevgeny/angular2-highcharts" rel="nofollow noreferrer">https://github.com/gevgeny/angular2-highcharts</a> which itself has not been maintained for a long time.</p>
  
  <p>I want to create something like the following <a href="http://jsfiddle.net/214uj22k/1/" rel="nofollow noreferrer">http://jsfiddle.net/214uj22k/1/</a> but I am at a loss if this can be done in the current build with either Highcharts or Highstocks.</p>
  
  <p>Fiddle Code:</p>
  
  <pre><code>var today = new Date(),
      day = 1000 * 60 * 60 * 24;
  
  // Set to 00:00:00:000 today
  today.setUTCHours(0);
  today.setUTCMinutes(0);
  today.setUTCSeconds(0);
  today.setUTCMilliseconds(0);
  today = today.getTime();
  
  // THE CHART
  Highcharts.ganttChart('container', {
      title: {
          text: 'Gantt Chart Timeline'
      },
      xAxis: {
              type: 'datetime',
          min: today - 10 * day,
          max: today
      },
  
      /*
      plotOptions: {
          gantt: {
              pathfinder: {
                  type: 'simpleConnect'
              }
          }
      },
      */
  
      series: [{
          name: 'State 1',
          data: [{
              taskName: 'System 1',
              start: today - 10 * day,
              end: today - 7 * day
          }, {
              taskName: 'System 2',
              start: today - 6 * day,
              end: today - 3 * day
          }, {
              taskName: 'System 3',
              start: today - 7 * day,
              end: today - 2 * day
          },{
              taskName: 'System 1',
              start: today - 3 * day,
              end: today - 0 * day
          }]
      }, {
          name: 'State 2',
          data: [{
              taskName: 'System 1',
              start: today - 7 * day,
              end: today - 3 * day
          }, {
              taskName: 'System 2',
              start: today - 10 * day,
              end: today - 6 * day
          }, {
              taskName: 'System 3',
              start: today - 2 * day,
              end: today - 0 * day
          }]
      }, {
          name: 'State 3',
          data: [{
              taskName: 'System 2',
              start: today - 3 * day,
              end: today - 0 * day
          }, {
              taskName: 'System 3',
              start: today - 10 * day,
              end: today - 7 * day
          }]
      }]
  });
  </code></pre>