Change bar color Chart Bar Google

Question

I would like the help of you to change the color of the bars, I could not even putting as parameter the Colors it does not change.

I’m using the Google Charts Api.

Thanks for the help.

<script type="text/javascript">
      google.charts.load('current', {'packages': ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['Votação', 'Porcentagem'],
            ["King's pawn (e4)", 44],
            ["Queen's pawn (d4)", 31],
            ["Knight to King 3 (Nf3)", 12],
            ["Queen's bishop pawn (c4)", 10],
            ['Other2', 3]
        ]);

        var options = {
            title: 'Gráfico da Votação',
            width: 700,
            height: 400,
            legend: {position: 'none'},
            chart: {
                title: 'Gráfico da Votação',
                subtitle: 'votação por percentual'
            },
            bars: 'horizontal', // Required for Material Bar Charts.
            axes: {
                x: {
                    0: {side: 'top', label: 'Porcentagem'} // Top x-axis.
                }
            },
            bar: {groupWidth: "90%"},
            colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#7570b3']
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
    }
</script>

Answer 1

it was very simple the solution I switched google.charts.Bar by google.visualization.Barchart and includes in options Theme: 'material', it was like this

<script>
    var urlSite = "<?php echo esc_url(get_template_directory_uri()); ?>";
    var urlNormalSite = "<?php echo esc_url(home_url()); ?>";

    google.charts.load('current', {'packages': ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['Votação', 'Porcentagem', {role: 'style'}, {role: 'annotation'}],
            <?php


            foreach ($infoVotacao["listaOpcoesVotacao"] as $opcoes) {
                $r = new ColorsRandomHelper();
                echo "[\"" . $opcoes["descricaoOpcao"] . "\", " . $opcoes["subTotalPercent"] . ",'#".$r->getColorRandom()."','" . $opcoes["subTotalPercent"] . "%'],\n";
            }
            ?>


        ]);

        var options = {
            title: 'Gráfico da Votação',
            width: 700,
            height: 400,
            legend: {position: 'none'},
            theme: 'material',
            chart: {
                title: 'Gráfico da Votação',
                subtitle: 'votação por percentual'
            },
            bars: 'horizontal', // Required for Material Bar Charts.
            axes: {
                x: {
                    0: {side: 'top', label: 'Porcentagem'} // Top x-axis.
                }
            },
            bar: {groupWidth: "90%"}

        };

        var chart = new google.visualization.BarChart(document.getElementById('top_x_div'));
        chart.draw(data, options);
    }
</script>