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: 1
                }
            },
            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();
                        }
                    }
                }
            },
            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}...