Chart Formatting in ChartWrapper in Google Charts

Question

I'm creating a variety of charts using the Dashboard portion of Google Charts.

To make my charts I'm using the convention:

var chartName = new google.visualization.ChartWrapper({
    // lots of options here
});

However, there are certain customization details that are not being called when I enter them inside the ChartWrapper object.

In particular, trendlines, changing the bars to horizonta on a bar chart, and making the bars stacked.

There are others, but these should suffice for this question because they're all contained within a single chart that I'm trying to troubleshoot.

I assume there's a common element that I'm missing in all of these, which is why I thought it best to include them all in a single question. There must be some detail about the ChartWrapper syntax that I'm not getting right.

For all of the above mentioned items I'm first placing these in the 'options' object, and then as their own key directly inside ChartWrapper() without any additional nesting.

To get into more specifics:

CODE:

Here's some example code that's not working:

var childrenHelpedChart = new google.visualization.ChartWrapper({
        'chartType'       :  'Bar',
        'containerId'     :  'chart_div2',
        'view'            :  {
            'columns'     : [0, 2, 3]
        },

        'options'         : {
            'height'      : 400,
            'trendlines'  :  {0 : {}},
            'isStacked'   : 'percent',
            'bar'         : 'horizontal'
        },
    });

The chart I use responds to the 'height' variable, but 'trendlines', 'isStacked' and 'bar' all fall on deaf ears.

However, if I place them outside the 'options' object they also don't show up in the chart.

For example, the below code also has no effect.

CODE2:

    var childrenHelpedChart = new google.visualization.ChartWrapper({
        'chartType'       :  'Bar',
        'containerId'     :  'chart_div2',
        'view'            :  {
            'columns'     : [0, 2, 3]
        },

        'options'         : {
            'height'      : 400
        },
        'trendlines'      : {
            0             : {}
        },
        'bar'             : 'horizontal',
        isStacked       : 'percent'
});

I see two very similar questions here and here , but neither of those have answers.

If it's helpful here's the entire script I'm using to generate the chart:

SCRIPT:

google.charts.setOnLoadCallback(initialize);

function initialize() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=1104676809');
    query.send(drawDashboard)
}

function drawDashboard(response) {

    var data = response.getDataTable();

    var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));

    var storytimeDateFilter2 = new google.visualization.ControlWrapper({
        'controlType':  'DateRangeFilter',
        'containerId':  'date_filter_div2',
        'options'    :  {
            'filterColumnIndex' : 0
        }
    }); 

    var childrenHelpedChart = new google.visualization.ChartWrapper({
        'chartType'       :  'Bar',
        'containerId'     :  'chart_div2',
        'view'            :  {
            'columns'     : [0, 2, 3]
        },

        'options'         : {
            'height'      : 400
        },
        'trendlines'      : {
            0             : {}
        },
        'bar'             : 'horizontal',
        'isStacked'       : 'percent'
    });

dashboard.bind(storytimeDateFilter2, childrenHelpedChart);
dashboard.draw(data);
}

Answer 1

the charts you are using are Material charts
there are several options which simply do not work with Material charts
you can find the list here --> Tracking Issue for Material Chart Feature Parity #2143

to correct, you could use the Core chart versions,
with an additional option for --> theme: 'material'

Material = 'Bar'

var childrenHelpedChart = new google.visualization.ChartWrapper({
    'chartType'       :  'Bar',  // <- Material version
    'containerId'     :  'chart_div2',
    'view'            :  {
        'columns'     : [0, 2, 3]
    },

    'options'         : {
        'height'      : 400,
        'trendlines'  :  {0 : {}},
        'isStacked'   : 'percent',
        'bar'         : 'horizontal'
    },
});

Core = 'BarChart' (horizontal) -- or -- 'ColumnChart' (vertical)

var childrenHelpedChart = new google.visualization.ChartWrapper({
    'chartType'       :  'BarChart',  // <-- Core version
    'containerId'     :  'chart_div2',
    'view'            :  {
        'columns'     : [0, 2, 3]
    },

    'options'         : {
        'height'      : 400,
        'trendlines'  :  {0 : {}},
        'isStacked'   : 'percent',
        'theme'       : 'material'  // <- Material theme
    },
});