JSFiddle - React, Tailwind, and code Playground

by core972

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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="chart" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$('#chart').highcharts({
      chart: {
        type: "line",
        borderRadius: 10,
        marginTop: 40,
        marginBottom: 30,
        marginRight: 20,
        marginLeft: 50,
        zoomType: "xy",
        panning: true,
        resetZoomButton: {
            position: {
                x: 0,
                y: -30
            },
            theme: {
                style: {
                    width: 'auto',
                    fontSize: 10
                }
            }
        }
    },
    title: "",
    xAxis: {
        type: "datetime",
        tickPixelInterval: 60
    },
    yAxis: {
        title: "",
        plotLines: [{
            value: 0,
            width: 1,
            color: "#808080"
        }],
        tickPixelInterval: 60
    },
    plotOptions: {
        series: {
            stickyTracking: false,
        },
    },
    tooltip: {
        followTouchMove: false,
        useHTML: true,
        style: {
          pointerEvents: 'auto'
        },
        backgroundColor: "#FFF",
        borderRadius: 20,
        formatter: function () {
            return `<div><a href="https://www.google.es" target="_blank">open google</a></div>`;
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    credits: {
        enabled: false
    }
    });