JSFiddle - React, Tailwind, and code Playground

by Brandon Lint

HTML

<html>
    
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1.1", {
                packages: ["bar"]
            });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?key=0AkC6q_6fzB6WdHBmRXdtVk1wTGdVcldVS0FsYURZV3c&transpose=0&headers=1&range=A43%3AD47&gid=4');
                query.send(handleQueryResponse9);
            }

            function handleQueryResponse9(response) {

                var data = response.getDataTable();


                var options = {
                    chart: {
                        title: 'Company Performance',
                        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                        vAxes: [{
                            "minValue": 240,
                            "viewWindowMode": "explicit",
                            "viewWindow": {
                                "min": 240,
                                "max": null
                            }
                        }],
                        colors: ['red', 'red', 'red'],
                    }
                };

                var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

                chart.draw(data, options);
            }
        </script>
    </head>
    
    <body>
        <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
    </body>

</html>