JSFiddle - React, Tailwind, and code Playground

by dlaliberte

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>

JavaScript

function drawChart() {
   
    var data = [
        ['Year', 'Sales', 'Expenses', 'Profit1', 'Sales1', 'Expenses1', 'Profit2', 'Sales2', 'Expenses2', 'Profit3'],
        ['2014', 10000, 400, 200, 10000, 400, 200, 1000, 400, 300],
        ['2015', 1170, 460, 250, 1170, 460, 250, 1170, 460, 1],
        ['2016', 1170, 460, 250, 1170, 460, 250, 1170, 460, 1],
        ['2017', 1170, 460, 250, 1170, 460, 250, 1170, 460, 1],
        ['2018', 1000, 400, 2000, 1000, 400, 200, 1170, 460, 1],
        ['2019', 1170, 460, 250, 1170, 460, 250,1000, 400, 1],
       ['2020', 1170, 460, 250, 1170, 460, 250,1000, 400, 1],
       ['2020', 1170, 5, 250, 1170, 460, 250,1000, 400, 1]];
    
     var tdata = google.visualization.arrayToDataTable(data);
    
    var formatter = new google.visualization.NumberFormat({ 
            prefix: '$', 
            pattern: "#,###.##"
        //pattern: 'short'
    });
			for (var i = 1; i < data[0].length; i++) {
				formatter.format(tdata, i); // Apply formatter to columns
			}
    
    var options = {
        height: 450,
        tooltip: { textStyle: { fontSize: 9 } },
        vAxis: { 
            format: 'short',
            textPosition: 'out',
            textStyle: {
                fontSize: 9
            },
            ticks: [{v: 0}, 
                    {v: 2500, f: '$2.5K'},  
                    {v: 5000, f: '$5K'},  
                    {v: 7500, f: '$7.5K'},  
                    {v: 10000, f: '$10K'}
                    ]
        }

    };
    
    var chart = new google.visualization.ColumnChart(document.getElementById('barchart_material'));

    
    chart.draw(tdata, options);
}

google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);