JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>

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

JavaScript

var options = {
    "colors": ["#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"],
    "symbols": ["circle", "diamond", "square", "triangle", "triangle-down"],
    "lang": {
        "loading": "Loading...",
        "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
        "shortMonths": ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        "weekdays": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
        "decimalPoint": ".",
        "resetZoom": "Reset zoom",
        "resetZoomTitle": "Reset zoom level 1:1",
        "thousandsSep": ",",
        "rangeSelectorZoom": "",
        "rangeSelectorFrom": "Von",
        "rangeSelectorTo": "bis",
        "downloadPNG": "Download PNG image",
        "downloadJPEG": "Download JPEG image",
        "downloadPDF": "Download PDF document",
        "downloadSVG": "Download SVG vector image",
        "exportButtonTitle": "Export to raster or vector image",
        "printButtonTitle": "Print the chart"
    },
    "global": {
        "useUTC": true
    },
    "chart": {
        "borderColor": "#4572A7",
        "borderRadius": 5,
        "defaultSeriesType": "line",
        "ignoreHiddenSeries": true,
        "spacingTop": 10,
        "spacingRight": 10,
        "spacingBottom": 15,
        "spacingLeft": 10,
        "style": {
            "fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
            "fontSize": "12px"
        },
        "backgroundColor": "#FFFFFF",
        "plotBorderColor": "#C0C0C0",
        "panning": true,
        "renderTo": "container",
        "inverted": false
    },
    "title": {
        "text": "Einkäufe",
        "align": "center",
        "y": 15,
        "style": {
            "color": "#3E576F",
            "fontSize": "16px"
        },
       ...