JSFiddle - React, Tailwind, and code Playground

by Igor Peshkov

HTML

<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<canvas id="lineChart" width="550" height="400"></canvas>
<div class="reports-legend"></div>

JavaScript

(function($){
    $(document).ready(function(){
        var lineChart = document.getElementById("lineChart").getContext("2d");
        
        var lineChartData = {
            labels: ["March"],
            datasets: [
                {
                    label: "Commission Written",
                    fillColor: "rgba(44,131,193,0.2)",
                    strokeColor: "rgba(44,131,193,1)",
                    pointColor: "rgba(44,131,193,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(44,131,193,1)",
                    data: [3000]
                },
                {
                    label: "Commission Earned",
                    fillColor: "rgba(106,192,228,0.2)",
                    strokeColor: "rgba(106,192,228,1)",
                    pointColor: "rgba(106,192,228,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(106,192,228,1)",
                    data: [1500]
                }
            ]
        };
        
        var lineChartOptions = {
            scaleLabel : "<%= '£' + Number(value).toFixed(2).replace('.', ',')%>",
            scaleBeginAtZero: true
        };
        
        myLineChart = new Chart(lineChart).Line(lineChartData, lineChartOptions);
        $('.reports-legend').html(myLineChart.generateLegend());
    });
})(jQuery)