JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
 <h3 class="ml-2 mb-4" style="font-size:15px"><?php echo _dash_header_issues_bymonth ?></h3>
                                    <div id="ServiceEventsByMonth_error" class="alert alert-warning fade show rounded-0" role="alert" style="display:none;">
                                    <div class="text"></div>
                                    </div>
                                    <div class="loader spinner_ServiceEventsByMonth"></div>
                                    <div id="ServiceEventsByMonth" style="width: 100%; height:400px;"></div>

JavaScript

var font = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"';
       var sessiontheme='dark2';
        var chartbackground='#3a4149';
        var chartgridcolor='#23282c';
        var themescheme = 
        [
        "#0091D5",
        "#A5D8DD",
        "#EA6A47",
        "#F1F1F1",
        "#AAAAAA",
        "#1C4E80",
        ];

var userlang='de';

CanvasJS.addCultureInfo("de",
{
    decimalSeparator: ",",
    digitGroupSeparator: ".",
    days: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
    months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
    shortMonths: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
});


$(".spinner_ServiceEventsByMonth").show();
function loadServiceEventsByMonthChart(apicallurl){
if (apicallurl)    {
    var apicall = apicallurl
} else {
    var apicall = "https://api.npoint.io/466a337a0dc5a3462eb6"
}

$.getJSON(apicall, function(data) {  

// Check if json is empty
if (jQuery.isEmptyObject(data)){
    $("#ServiceEventsByMonth_error").css("display", "block");
    $("#ServiceEventsByMonth_error").html('<?php echo _dash_nodata ?>');
} else{
    $("#ServiceEventsByMonth_error").css("display", "none");
    $("#ServiceEventsByMonth_error").html('');
}

var dps_stacked = [];
var dataSeries_stacked = [];
var dataPointsLastCycles1 = [];

var chartServiceEventsByMonth = new CanvasJS.Chart("ServiceEventsByMonth", {
    zoomEnabled: true, 
    theme:sessiontheme,
    backgroundColor: chartbackground,
    animationEnabled: true,
    exportEnabled: true,
    culture: userlang,
    title:{
        fontFamily: font,
        text: "",
        fontSize: 15,
    },
    axisX:{
        labelFontFamily: font,
        margin: 10,
        labelFormatter: function (e) {
				return...