Highcharts Demo

by Black Label

HTML

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

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

CSS

#container {
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
    type: 'timeline'
  },
  xAxis: {
    type: 'datetime',
    visible: false
  },
  yAxis: {
    gridLineWidth: 1,
    title: null,
    labels: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Timeline of Space Exploration'
  },
  subtitle: {
    text: 'Info source: <a href="https://en.wikipedia.org/wiki/Timeline_of_space_exploration">www.wikipedia.org</a>'
  },
  tooltip: {
    style: {
      width: 300
    }
  },
  series: [{
    dataLabels: {
      allowOverlap: true,
      format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
        '{point.x:%d %b %Y}</span><br/>{point.label}'
    },
    marker: {
      symbol: 'circle'
    },
    data: [{
      x: Date.UTC(1951, 5, 22),
      name: 'A',
      label: 'A',
      description: 'A1'
    }, {
      x: Date.UTC(1969, 6, 20),
      name: 'B',
      label: 'B',
      description: 'B1'
    }, {
      x: Date.UTC(1969, 6, 20),
      name: 'C',
      label: 'C',
      description: 'C1'
    }, {
      x: Date.UTC(1969, 6, 20),
      name: 'D',
      label: 'D',
      dataLabels: {
        y: 40
      },
      description: 'D1'
    }, {
      x: Date.UTC(1989, 7, 8),
      name: 'E',
      label: 'E',
      description: 'E1'
    }, {
      x: Date.UTC(1998, 10, 20),
      name: 'F',
      label: 'F',
      description: 'F1'
    }]
  }]
});