Help needed for Google Stacked Bar Chart

[Arghya chakroborty]

I have two questions regarding Stacked bar charts -

1. How to insert a subtitle OR add a tooltip to non-Material bar charts (the one haiving initialized using new google.visualization.BarChart()) ?

I have an existing bar chart where non-material bar chart is getting used. I found that for material bar charts, it's possible to add a sub-title, which is supposedly not available for non-material bar charts. Could someone tell me if there is a way ?

If not sub-title, I am okay to display additional text in tooltip, when user hovers over the chart title.

2.  How to remove h-axis texts for stacked bar chart ?

Here is my code :

data = new google.visualization.DataTable();

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

data.addColumn('number', 'Unresolved SPR Count');

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

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

data.addColumn('number', 'Open SPR Count');

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

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

data.addRows(<length of array containing data>);

// Loop through the array containing data

// and set value to data : data.setValue(<rowIndex>, <colIndex> , <value>);

var options = {

                    title: "Chart Title",

            chartArea:{top:30,left:'25%',width:'60%',height:'100%'},

            fontSize:10,

            legend: { position: "none" },

                    isStacked: true,

                    hAxis: {

                        gridlines: {

                            color: 'transparent'

                        },

                    textStyle : {

                    color : 'transparent'

                    },

                    textPosition: 'none' 

                    },

                    annotations : {

                    datum : {

                    stem : {

                    color : 'transparent'

                    }

                    },

                       alwaysOutside : true

                    },

                    tooltip: {

                    trigger : 'selection'

                    },

                    vAxis: {

                    textStyle: {

                    fontSize: 8

                    }

                    }

            };

var chart = new google.visualization.BarChart("<div Id>");

            

            data.sort([{column: 1, desc: true}]);

            chart.draw(data, options);

Here is the array containing data

[

["System","color: FF8585",156,"color: 92D050",207],

["IDC","color: FF8585",27,"color: 92D050",48],

["Wallstand","color: FF8585",23,"color: 92D050",52],

["Service","color: FF8585",19,"color: 92D050",24],

["ASTRA","color: FF8585",16,"color: 92D050",27],

["Review","color: FF8585",15,"color: 92D050",15],

["Calypso","color: FF8585",14,"color: 92D050",22],

["Detector_Accessories","color: FF8585",14,"color: 92D050",19],

["GST_CSE","color: FF8585",13,"color: 92D050",15],

["Table","color: FF8585",13,"color: 92D050",19],

["Saber","color: FF8585",12,"color: 92D050",35],

["IP_Chain","color: FF8585",12,"color: 92D050",14],

["IO","color: FF8585",10,"color: 92D050",11],

["OTS","color: FF8585",9,"color: 92D050",11],

["Manuals","color: FF8585",8,"color: 92D050",8],

["BOSS","color: FF8585",8,"color: 92D050",11],

["FunctionGap","color: FF8585",8,"color: 92D050",9],

["RTIP","color: FF8585",7,"color: 92D050",20],

["Cabinet","color: FF8585",7,"color: 92D050",7],

["IUI","color: FF8585",6,"color: 92D050",51],

["Other","color: FF8585",44,"color: 92D050",76]

]

Attached is the snapshot of the chart I am getting