Parallel coordinates Series Click

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

var data = [
  [1012690800000, 3, 2311020, 0, 462180, 1, 0],
  [1012518000000, 5, 2311020, 0, 462180, 1, 0],
  [1012690800000, 5, 2464980, 0, 493020.00000000006, 1, 0],
  [1012863600000, 4, 1881000, 0, 470280.00000000006, 1, 0]
];

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: {

        click: function(e) {
          console.log("series index  --> ", e.point.series.index, "    ", this);
          return false;
        },
        mouseOver: function() {
          this.group.toFront();
        }
      }
    }
  },
  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: ['black'],
  series: data.map(function(set, i) {
    return {
      name: 'Runner ' + i,
      data: set,
      shadow: false
    };
  })
});