JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; width: 430px;"></div>

JavaScript

var chart, csv = 'tx, tx2<br> text1, 1, -1\n\
tx, tx2<br> text2, 2, 0\n\
tx, tx2<br> text3, 3, 1';

$(function () {

var lines = csv.split('\n'),
    series = [];

$.each(lines, function(i, line) {

    item = line.split(',');

    if (typeof series[item[0]] !== 'object') {
        series[item[0]] = series[series.length] = {
            name: item[0],
            data: []
        }
    }

    series[item[0]].data.push({
        info: item[1],
        x: parseInt(item[2]),
        y: parseInt(item[3])
    });

});



//settings for chart
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'scatter'
    },
    tooltip: {
        formatter: function() {
            return '<b>Info:</b>' + this.point.info;
        }
    },
    yAxis: {
        labels: {
            enabled: true
        }
    },
    xAxis: {
        type: 'datetime'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                align: 'left',
                rotate: 90,
                formatter: function() {
                    return '<b>' + this.point.info + '</b>';
                },
            },
            marker: {
                enabled: true,
                symbol: 'square',
                //custom leads to a custom symbol in highstock.src.js
            },
        }
    },
    series: series
});
}