JSFiddle - React, Tailwind, and code Playground

by enanotg

HTML

<script src="https://www.laprepie.com/form/lib/jquery.bpopup.min.js"></script>
<script src="https://cdn.rawgit.com/ahrex/Chart.js/b09a68353e95cbffbd1fae620c1577a0bb74cbf8/Chart.js"></script>
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<canvas id="myChart" width="500" height="400"></canvas>
</div>

CSS

#element_to_pop_up {
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none;
    padding:20px;
    min-width:400px;
    min-height: 180px;
}

JavaScript

var lineChartData = {
    labels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
    datasets: [{
        label: "Zona 1",
        fillColor: "rgba(0, 255, 3, 0.9)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [16, 15, 14, 13, 12, 11, 10, 9, 8]
    }, {
        label: "Medio",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [null, null, null, null, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, null, null, null]
    }, {
        label: "Top",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [null, null, null, null, null, null, null, null, null, null, 24, 23, 22, 21, 20, 19, 18]
    }]
};

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        this.chart.ctx.textAlign = "center"
        this.chart.ctx.fillText("ZONE1", this.scale.calculateX(3.5), this.scale.calculateY(20.75))
        this.chart.ctx.fillText("ZONE2", this.scale.calculateX(11.5), this.scale.calculateY(13))
        this.chart.ctx.fillText("ZONE3", this.scale.calculateX(2), this.scale.calculateY(9.75))
        this.chart.ctx.fillText("ZONE4", this.scale.calculateX(14.5), this.scale.calculateY(22.75))
    }
});

window.onload = function () {
    var ctx = document.getElementById("myChart").getContext("2d");
    var step = 1;
    var max = 24;
    var start = 8;
    window.myLine = new...