JSFiddle - React, Tailwind, and code Playground

by klsakthi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'area',
            marginRight: 130,
            marginBottom: 25,
            height: 100
        },
        title: {
            text: 'Signal',
            x: -20 //center
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6',
                '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
            title: {
                text: 'Digital Signal'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +'°C';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [
            [0,0],[1,0],[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],
            [6,0],[7,0],[7,1],[8,1],[9,1],[10,1],[11,1],[12,1],
            [12,0],[13,0],[14,0],[15,0],[15,1],[16,1],[17,1],[18,1],
            [19,1],[20,1],[21,1],[22,1],[23,1],[24,1],
            [25,1],[26,1],[27,1],[28,1],[29,1],[30,1],
            [30,0],[31,0],[31,0],[32,0],[33,0],[34,0],[34,1],[35,1],[36,1],
            [37,1],[38,1],[39,1],[40,1],[41,1],[42,1],
            [43,1],[44,1],[45,1],[46,1],[47,1],[48,1]]
        }]
    });
});