JSFiddle - React, Tailwind, and code Playground

by Gert Vaartjes

HTML

<script src="https://github.highcharts.com/gantt/highcharts.js"></script>

<script src="https://github.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://www.highcharts.com/samples/data/usdeur.js"></script>

<div id="container"></div>

CSS

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

JavaScript

// THE CHART
Highcharts.ganttChart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Grid axis with navigator'
    },

    subtitle: {
        text: 'Using the time navigation features from Highstock'
    },

   
    series: [{
        name: 'Project 1',
        xAxis: 0,
        data: usdeur
    }]
});