I am encountering an issue with my Google Bar Chart where the bar label is not displaying outside of the bar when it is too large to fit inside. This behavior should be the default, but my charts are not working as expected. The problem can be seen in rows 2, 3, 5, 7, and 8 in the screenshot provided below.
https://i.sstatic.net/TPj2d.png
Below is the code snippet:
// START Disease Resistance
function disease() {
var data = google.visualization.arrayToDataTable([
['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],
['Barley Yellow Dwarf', 5, '5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subtracting the value from 10
['Fusarium Head Blight', 1, '9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
['Hessian Fly', 1, '9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
['Leaf Rust', 2, '8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
['Powdery Mildew', 1, '9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
['Soil-Borne Mosaic', 4, '6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
['Stem Rust', 1, '9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
['Stripe Rust', 1, '9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
['Tan Spot', 5, '5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
['Wheat Streak Mosaic', 5, '5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],
]);
var paddingHeight = 80;
var rowHeight = data.getNumberOfRows() * 80;
var chartHeight = rowHeight + paddingHeight;
var options = {
'backgroundColor': 'transparent',
annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
legend: { position: 'none'},
height: chartHeight,
colors: ['#F4AA00'],
chartArea: {
width: '100%',
height: rowHeight
},
hAxis: {
ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
viewWindow: {
min: 0,
max: 10
},
minValue: 0,
textStyle: {
fontName: 'Source Sans Pro',
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
fontName: 'Source Sans Pro',
bold: true,
fontSize: 14,
color: '#4d4d4d'
}
},
vAxis: {
textPosition: 'in',
title: 'Disease',
textStyle: {
fontName: 'Source Sans Pro',
fontSize: 14,
bold: false,
color: '#fff'
},
titleTextStyle: {
fontName: 'Source Sans Pro',
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('disease'));
chart.draw(data, options);
// redraw charts responsively
(function($) {
function resizeCharts () {
chart.draw(data, options);
}
$(window).resize(resizeCharts);
})( jQuery );
}
// END Disease Resistance
Any help would be greatly appreciated!