Google Charts LineChart Options Not Totally Working (dual y-axis)

Question

I've built several charts in D3 but at the clients request I started using Google Charts. So far, I like it a lot, but I can't get the options to work correctly.

I'm using angular-google-chart and I double checked that the options are getting passed to the google api correctly, and they are. I also read the line chart docs thoroughly, so I'm pretty confident the syntax is correct, but let me know if you see any issues with the data below.

There are several options that are not working, but in particular, none of the vAxis options are working; the most important of which is the y-axis titles are not showing.

I've noticed that the linechart api is a bit finicky. For instance, I made the overall chart title bigger and it just randomly stopped showing the top legend, so I had to change it back. I wish there was some sort of document that outlines the tradeoffs to each option change.

Note that I'm trying to show two y-axes.

$scope.chartObject = {
        type: "LineChart", //https://developers.google.com/chart/interactive/docs/gallery/linechart
        data: {
            cols: [
                {
                    id: "days",
                    label: "Days",
                    type: "number", //supports boolean, number, string, date, datetime, timeofday
                    p: {}
                },
                {
                    id: "obj",
                    label: "Objects",
                    type: "number",
                },
                {
                    id: "recommended",
                    label: "Recommended",
                    type: "number",
                },
                {
                    id: "used",
                    label: "Used",
                    type: "number",
                    p: {}
                },
            ],
            rows: [
                {
                    c: [
                        {v: 7},
                        {v: 19,},
                        {v: 12,},
                        {v: 12,},
                    ]
                },
                {
                    c: [
                        {v: 6},
                        {v: 13},
                        {v: 1,},
                        {v: 1,},
                    ]
                },
                {
                    c: [
                        {v: 5},
                        {v: 24},
                        {v: 5},
                        {v: 5},
                    ]
                },
                {
                    c: [
                        {v: 4},
                        {v: 24},
                        {v: 5},
                        {v: 5},
                    ]
                },
                {
                    c: [
                        {v: 3},
                        {v: 24},
                        {v: 5},
                        {v: 5},
                    ]
                },
                {
                    c: [
                        {v: 2},
                        {v: 24},
                        {v: 5},
                        {v: 5},
                    ]
                },
                {
                    c: [
                        {v: 1},
                        {v: 24},
                        {v: 5},
                        {v: 5},
                    ]
                },
            ]
        },
        options: {
            title: "Inputs",
            titleTextStyle: {
                color: '#728292', //$darkGreyAccent
                bold: false,
                //fontSize: 20,
            },
            axisTitlesPosition: 'out',
            animation: {
                duration: 1000,
                startup: true,
            },
            backgroundColor: {
                stroke: 'grey',
                strokeWidth: 0,
            },
            forceIFrame: true,
            legend: {
                position: 'top',
                alignment: 'right',
            },
            chartArea: {
                width: '80%',
                height: '300px',
                left: '10%',
            },
            width: '100%',
            tooltip: {
                trigger: 'selection',
            },
            colors: ['#003D78', '#D34400','#00AB6F', '#FFC300', '#5A8FC3'],

            hAxis: {
              title: "Days",
              baselineColor: '#95A1AA',
              textStyle: {
                color: '#728292',
              },
              textPosition: 'out',
              gridlines: {
                color: 'transparent',
              },
              direction: -1,
            },
            pointSize: 10,
            vAxis: {
                0: {
                    title: "Objects",
                    titleTextStyle: {
                        color: '#728292', //$darkGreyAccent
                    },
                    textPosition: 'out',
                    baseline: 2,
                    baselineColor: '#D34400', //$red
                    gridlines: {
                      count: 10,
                      color: '#ECF0F1', //$lightGreyAccent
                    },
                    textStyle: {
                        color: '#728292', //$darkGreyAccent
                    },                      
                    minValue: 0,
                    viewWindow: {
                        min: 0,
                    },
                },
                1: {
                    title: "OD SPan Days",
                    titleTextStyle: {
                        color: '#D34400', //$red
                    },
                    textPosition: 'out',                        
                    textStyle: {
                        color: '#D34400', //$red
                    },

                    baselineColor: '#D34400', //$red
                    baseline: 0,
                    minValue: 0,
                    viewWindow: {
                        min: 0,
                    },
                },                
            },
            series: {
                0: { 
                    pointShape: 'circle', 
                    targetAxisIndex: 0 
                },
                1: { 
                    pointShape: 'triangle', 
                    lineDashStyle: [4, 4], 
                    targetAxisIndex: 1 
                },
                2: { 
                    pointShape: 'star', 
                    dent: .02, 
                    lineWidth: 0,
                    targetAxisIndex: 1,
                },
            }
        },
        formatters: {}
    }

Answer 1

I think you hit a fairly common pitfall. When you use dual-y you need to change vAxis to vAxes . Other than that, looks ok.

Thanks for using angular-google-chart, by the way!