Loosing colors with google.charts.Bar.convertOptions

[Chris Randall]

Hey all,

I'm using the material bar charts (or trying to at least) as they are described here https://developers.google.com/chart/interactive/docs/gallery/barchart.

When I call .draw(material, options), everything works great (more importantly, the colors work great), except that the segments don't stack and the labels for the axes are wrong, the solution to which is to use convertOptions.

However, when I call .draw(material, google.charts.Bar.convertOptions(options)), the colors of the bar segments are no longer correct, everything instead being some shade of the first color in my colors array (green, in this instance). 

What happened? I've tried assigning the colors as styles in the data table (which never worked at all) and setting options.colors to my color array.

Many thanks.

Here's the code:

function drawGoogleBarChart(parentID, width, height, json, isHoriz) {

    var bcd = JSON.parse(json);

    var bars = bcd.Bars;

    var colors = [];

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Name');

    for (var i = 0; i < bars[0].Segments.length; ++i) {

        data.addColumn('number', bars[0].Segments[i].Name);

        data.addColumn({ type: 'string', role: 'style' });

        colors.push(rgbToHex(bars[0].Segments[i].Color.R, bars[0].Segments[i].Color.G, bars[0].Segments[i].Color.B));

    }

    for (var i = 0; i < bars.length; ++i) {

        var row = [];

        row.push(bars[i].Label);

        for (var j = 0; j < bars[i].Segments.length; ++j) {

            row.push(bars[i].Segments[j].Count);

            row.push(rgbToHex(bars[i].Segments[j].Color.R, bars[i].Segments[j].Color.G, bars[i].Segments[j].Color.B));

        }

        data.addRow(row);

    }

    var xTitle = bcd.XAxis != null ? bcd.XAxis.Title : ""; 

    var yTitle = bcd.YAxis != null ? bcd.YAxis.Title : "";  

    var barDirection = isHoriz ? "horizontal" : "vertical";

    var options = {

        isStacked: true,

        animation: {

            startUp: true,

            duration: 500,

            easing: 'out'

        },

        hAxis: {

            title: xTitle,

            minValue: 0,

        },

        vAxis: {

            title: yTitle

        },

        colors: colors,

        bars: barDirection,

        width: width,

        height: height

    };

    var material = new google.charts.Bar(document.getElementById(parentID));

//    material.draw(data, options);

    material.draw(data, google.charts.Bar.convertOptions(options));

}