JSFiddle - React, Tailwind, and code Playground

by Jaikrat Tariyal

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

<div id="chart_div" style="width: 500px; height: 300px;"></div>

JavaScript

//http://stackoverflow.com/questions/25680114/how-to-color-google-column-charts-every-bar-differently-and-keep-them-as-it-is

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawKeywordChartForManage);
		    
function drawKeywordChartForManage() {
    var val = 'Tax:47;Finance:95;Awards:126;Bank:137;Debt:145;';
    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Keyword');
    data.addColumn('number', 'Occurences');
    
    data.addRows(5);
    
    var length = val.length;	
    var row = 0;
    while(length>0){
        var sepAt = val.indexOf(";");
        var value = parseInt(val.substring(val.indexOf(":")+1, sepAt));
        data.setValue(row, 0, val.substring(0, val.indexOf(":")));
        data.setValue(row++, 1, value);
        
        val = val.substring(val.indexOf(";")+1, length);
        length = val.length;
    }
    
    var options = {
        title: 'Keyword Matches',
        width: 660, 
        height: 450,
        titleTextStyle:{bold:true,fontSize:20},
        legend:{position:'none'}
    };		        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));    
    chart.draw(data, options);
    
$('#chart_div').contents().find('svg>g>g>g>rect')[5].attributes['6'].value='#8AA3B3';
$('#chart_div').contents().find('svg>g>g>g>rect')[6].attributes['6'].value='#A9B089';
$('#chart_div').contents().find('svg>g>g>g>rect')[7].attributes['6'].value='#848C49';				$('#chart_div').contents().find('svg>g>g>g>rect')[8].attributes['6'].value='#44464A';				$('#chart_div').contents().find('svg>g>g>g>rect')[9].attributes['6'].value='#704610';
    //['6'] gives me 'fill' attribute of 'rect' element
}