JSFiddle - React, Tailwind, and code Playground

author(s): Paweł Fus

by Black Label

HTML

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

<div id="container" style="width: 600px; margin: 0 auto;"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line',
        parallelCoordinates: true,
        parallelAxes: {
            tickAmount: 2,
            min: 0
        }
    },
    title: {
        text: 'Car set'
    },

    subtitle: {
        text: 'A demo of setting the same tick amount to all parallel axes'
    },

    plotOptions: {
        series: {
            lineWidth: 1,
            marker: {
                enabled: false
            }
        }
    },
    xAxis: {
        categories: ['Mpg', 'Cylinders', 'Displacement', 'HP', 'Lbs', 'Acceleration', 'Year', 'Origin'],
        gridLineWidth: 0
    },
    colors: ['rgba(200, 200, 200, 0.2)'],
    series: [{
        name: 'chevrolet chevelle malibu',
        data: [18, 8, 307, 130, 3504, 12, 70, 1]
    }, {
        name: 'buick skylark 320',
        data: [15, 8, 350, 165, 3693, 11.5, 70, 1]
    }, {
        name: 'plymouth satellite',
        data: [18, 8, 318, 150, 3436, 11, 70, 1]
    }, {
        name: 'amc rebel sst',
        data: [16, 8, 304, 150, 3433, 12, 70, 1]
    }, {
        name: 'ford torino',
        data: [17, 8, 302, 140, 3449, 10.5, 70, 1]
    }, {
        name: 'fordgalaxie 500',
        data: [15, 8, 429, 198, 4341, 10, 70, 1]
    }, {
        name: 'chevrolet impala',
        data: [14, 8, 454, 220, 4354, 9, 70, 1]
    }, {
        name: 'plymouth fury iii',
        data: [14, 8, 440, 215, 4312, 8.5, 70, 1]
    }, {
        name: 'pontiac catalina',
        data: [14, 8, 455, 225, 4425, 10, 70, 1]
    }, {
        name: 'amc ambassador dpl',
        data: [15, 8, 390, 190, 3850, 8.5, 70, 1]
    }, {
        name: 'citroen ds-21 pallas',
        data: [null, 4, 133, 115, 3090, 17.5, 70, 2]
    }, {
        name: 'chevrolet chevelle concours (sw)',
        data: [null, 8, 350, 165, 4142, 11.5, 70, 1]
    }, {
        name: 'ford torino (sw)',
        data: [null, 8, 351, 153, 4034, 11, 70, 1]
    }, {
        name: 'plymouth satellite (sw)',
        data: [null, 8, 383,...