JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="graph-double" data-percentage="50">
</div>

JavaScript

$(document).ready(function() {
    
    // This is basically a jQuery plugin but I don't want
    // to treat it as such.

    graphDivs = $('.graph-double');

    $.each(graphDivs, function(index) {
        var self = $(this);

        buildGraph(self, index);


        self.data("drawn", "true");
    });



    function buildGraph(self, index) {
        var percentage = self.data("percentage");
        self.prepend("<div class=\"graph-double-percent\">" + percentage + "</div>");
        self.prepend("<canvas id=\"graph-double-" + index + "\"></canvas>");

        drawGraph(self, index);
    }
    function drawGraph(self, index) {
        var canvas = $('#graph-double-' + index);
        canvas.width("400px");
        canvas.height("400px");
        var width = canvas.width();
        var height = canvas.height();
        var context = canvas.get(0).getContext('2d');
        var center = { x: (width / 2), y: (height / 2) };

        function animateGraph() {
            requestAnimationFrame(animateGraph);
            context.clearRect(0,0, width, height);

            context.beginPath();
            context.rect(0, 0, 150, height);
            context.fillStyle = "rgba(0,0,255,0.5)";
            context.fill();

            context.beginPath();
            context.rect(150, 0, 400, height);
            context.fillStyle = 'red';
            context.fill();
        }
        

        animateGraph();
    }


});