Highcharts Demo

author(s): Paweł Fus

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://code.highcharts.com/highcharts.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: rgba(255, 66, 66, 0.1);
  stroke-width: 2px;
}

JavaScript

$.getJSON(
  'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/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
              }
            }
          },
          point: {
            events: {
              mouseOver: function() {
                var series = this.series.chart.series, // all series on the chart
                  x = this.x,
                  y = this.y;

								Highcharts.each(series, function (s) {
                	// The same parallel coords
                  if (s.data[x].y === y) {
                  	s.group.toFront();
                  	s.setState('hover');
                  } else {
                  	s.setState('');
                  }
                });
                console.log(this);
              }
            }
          }
        }
      },
      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:...