Highcharts Demo

author(s): Paweł Fus

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script>
<div id="container"></div>

CSS

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

.highcharts-series-hover path {
  stroke: rgb(255, 66, 66);
  stroke-width: 2px;
}

JavaScript

Highcharts.getJSON(
  'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/marathon.json',
  function(data) {

    Highcharts.chart('container', {
      chart: {
        type: 'spline',
        parallelCoordinates: true,
        parallelAxes: {
          lineWidth: 2
        }
      },
      title: {
        text: 'Marathon set'
      },
      plotOptions: {
        series: {
          animation: false,
          marker: {
            enabled: false,
            states: {
              hover: {
                enabled: false
              }
            }
          },
          states: {
            hover: {
              halo: {
                size: 0
              }
            }
          },
          events: {
            mouseOver: function() {
              this.group.toFront();
            }
          },
          dataLabels: {
            enabled: true
          }
        }
      },
      tooltip: {
        pointFormat: '<span style="color:{point.color}">\u25CF</span>' +
          '{series.name}: <b>{point.formattedValue}</b><br/>'
      },
      xAxis: {
        categories: [
          'Training date',
          'Miles for training run',
          'Training time',
          'Shoe brand',
          'Running pace per mile',
          'Short or long',
          'After 2004'
        ],
        offset: 10
      },
      yAxis: [{
        type: 'datetime',
        tooltipValueFormat: '{value:%Y-%m-%d}'
      }, {
        min: 0,
        tooltipValueFormat: '{value} mile(s)'
      }, {
        type: 'datetime',
        min: 0,
        labels: {
          format: '{value:%H:%M}'
        }
      }, {
        categories: [
          'Other',
          'Adidas',
          'Mizuno',
          'Asics',
          'Brooks',
          'New Balance',
          'Izumi'
        ]
      }, {
        type: 'datetime'
      }, {
        categories: ['&gt; 5miles', '&lt; 5miles']
      }, {
        categories: ['Before', 'After']
      }],
      colors:...