JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <div class="widget widget-double">
    <div class="m-3 border">
        <table style="cursor: pointer !important;" class="table mb-0"><thead><tr><th class="text-center">Units Purchased by Month</th></tr></thead></table>
        <div class="w-100 aspect-ratio-50 p-2">
            <canvas id="chart-units-history" data-legendlabels="['Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May','Jun','Jul']" data-suppliers= "['Total','Starkey','Resound','Widex','Rexton','Unitron','Phonak','Signia']" data-datapoints="[[205,275,359,329,262,302,290,323,279,238,307,245],[16,13,14,11,23,11,24,23,15,0,0,0],[0,0,0,0,0,0,0,0,0,0,53,0],[169,194,261,193,151,158,128,143,163,173,139,208],[8,5,8,2,4,4,0,0,0,0,0,0],[0,0,19,36,7,35,27,30,13,0,0,0],[0,47,30,54,59,48,41,38,65,24,44,37],[12,16,27,33,18,46,70,89,23,41,71,0]]" data-datatype="units" class="line-graph w-100 aspect-ratio-50"></canvas>
        </div>
    </div>
</div>

</body>
</html>

CSS

chart

JavaScript

var lineChartColors = ["#000000", "#fd7730", "#ffd35c", "#3fc6f3", "#28a745", "#488cf2", "#4755d3", "#9768c9", "#f2748d", "#f287e7", '#992499', '#6BD69E']

$('.line-graph').each(function () {
        var legendlabels = ["Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul"];
        var datapoints = [[205,275,359,329,262,302,290,323,279,238,307,245],[16,13,14,11,23,11,24,23,15,0,0,0],[0,0,0,0,0,0,0,0,0,0,53,0],[169,194,261,193,151,158,128,143,163,173,139,208],[8,5,8,2,4,4,0,0,0,0,0,0],[0,0,19,36,7,35,27,30,13,0,0,0],[0,47,30,54,59,48,41,38,65,24,44,37],[12,16,27,33,18,46,70,89,23,41,71,0]];
        var suppliers = ["Total","Starkey","Resound","Widex","Rexton","Unitron","Phonak","Signia"];

        var datatype = $(this).data('datatype');
        var yAxisString = "Amounts";
        if (datatype == "units") { yAxisString = "Units Sold"; }
        else if (datatype == "money") { yAxisString = "Amount (Dollars)"; }

        var chart = new Chart($(this).get(0).getContext('2d'), {
        legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li class="chapter__item"><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>',
            type: 'line',
            data: {
                labels: legendlabels,
                datasets: $.map(datapoints, function (e, i) {
                    return {
                        backgroundColor: lineChartColors[i],
                        borderColor: lineChartColors[i],
                        fill: false,
                        data: e,
                        label: suppliers[i],
                        lineTension: 0.2,
                    }
                })
            },
            options: {
                layout: {
                    padding: {
                        left: 20,
                        right: 40,
                        top: 20,
                       ...