JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<canvas id="graph" width="300" height="200">   
        </canvas>

JavaScript

(function() {

var xPadding = 30;
var yPadding = 50;
var yAxisvalue = 100;
var numberOfOptions = 5;
var optionsName = ["a","b","c", "d","e"];
var maxBarHeight = yPadding-10;
var totalVotes = 654;
var data = { values:[
    { age: "10+", a: 15, b:20,c:10,d:12,e:40 },
    { age: "20+", a: 5, b:30,c:10,d:12,e:40 },
    { age: "30+", a: 13, b:8,c:10,d:12,e:40 },
    { age: "40+", a: 7, b:7,c:10,d:12,e:40 },
    { age: "50+", a: 19, b:11,c:30,d:10,e:30 },
    { age: "60+", a: 20, b:12,c:15,d:13,e:40 },
    { age: "70+", a: 15, b:25,c:10,d:10,e:40 }
]};

var currentPaths = [0,0,0,0,0,0,0];
var previousPaths = [0,0,0,0,0,0,0];
var colors = ["#819FF7", "#9FF781", "#FFBF00", "#E0F8E0", "#F7819F"];

function getLinePath(c,val)
    {
        c.strokeStyle = '#FFFFFF';
        c.beginPath();
        c.moveTo(getXPixel(0), getYPixel(data.values[0][val] + currentPaths[0]));
        previousPaths[0] =  currentPaths[0];   
        currentPaths[0] +=data.values[0][val];
        
        for(var i = 1; i < data.values.length; i ++) {
                c.lineTo(getXPixel(i), getYPixel(data.values[i][val] + currentPaths[i]));
                previousPaths[i] =  currentPaths[i];    
                currentPaths[i] +=data.values[i][val]; 
    }


        c.lineTo(getXPixel(6),getYPixel(previousPaths[6]));     
        for(var i = data.values.length-1; i >=0 ; i --) {
        c.lineTo(getXPixel(i), getYPixel(previousPaths[i]));
    }  
}
function getXPixel(val) {
    return ((graph.width - xPadding) / data.values.length) * val + (xPadding * 1.0);
}

function getYPixel(val) {
    return graph.height - (((graph.height - yPadding) / yAxisvalue) * val) - yPadding;
}
function getBarheight(val)
    {
       var totalVotesPerAge = 0;
       for(var i=0;i<numberOfOptions;i++)
       {
       totalVotesPerAge += data.values[val][optionsName[i]];
       console.log( totalVotesPerAge);
       }
       var percent =  totalVotesPerAge/totalVotes*100;
       console.log(percent); 
       var...