show small line near h-axis labels - google-visualization

Question

I am working on google chart API. I have a column chart where i want to show a small line near every label shown near h-axis as shown in the sample image below.
What modifications need to be done to show the small line near each label shown on h-axis.
Demo : https://jsfiddle.net/8tvm9qk5/
js code:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', 925, 786],
['bbdasdas', 652, 156],
['cbdasdas', 300, 200],
['ddasdasb', 925, 786],
['edasdb', 652, 156],
['fasdasb', 300, 200],
['gdasdasdb', 925, 786],
['abdasdasa', 925, 786],
['bbdasdas', 652, 156],
['cbdasdas', 300, 200],
['ddasdasb', 925, 786],
['edasdb', 652, 156],
['fasdasb', 300, 200],
['gdasdasdb', 925, 786]
]);
var options = {
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height:600,
chartArea: {
height:300,
top:100,
},
hAxis: {
title: 'Departamentos',
titleTextStyle: {
color: '#FF0000',
},
slantedText:true,
slantedTextAngle:45,
},
vAxis: {
title: 'Kits'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
--EDITED--
I tried as shown below, but could not get the expected result.
sample code:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addColumn('number', 'dumy');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
['abdasdasa', 925, 786,0, ''],
['bbdasdas', 652, 156,0, ''],
['cbdasdas', 300, 200,0, ''],
.....]);
PS: I tried by interchanging the column sequence too:
...
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'dumy');
Demo:https://jsfiddle.net/1xq2nj16/

Answer 1

the dummy series needs to be first when --> isStacked: true
or change the series to a different type to break from the stack...
(see series option in following snippet)
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'dumy');
data.addColumn({type:'string', role:'annotation'}); // interval role col.
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', 0, '', 925, 786],
['bbdasdas', 0, '', 652, 156],
['cbdasdas', 0, '', 300, 200],
['ddasdasb', 0, '', 925, 786],
['edasdb', 0, '', 652, 156],
['fasdasb', 0, '', 300, 200],
['gdasdasdb', 0, '', 925, 786],
['abdasdasa', 0, '', 925, 786],
['bbdasdas', 0, '', 652, 156],
['cbdasdas', 0, '', 300, 200],
['ddasdasb', 0, '', 925, 786],
['edasdb', 0, '', 652, 156],
['fasdasb', 0, '', 300, 200],
['gdasdasdb', 0, '', 925, 786]
]);
var options = {
annotations: {
stem: {
color: '#000000'
},
style: 'line',
textStyle: {
fontSize: 10
},
},
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height: 600,
chartArea: {
height: 300,
top: 100
},
hAxis: {
title: 'Departamentos',
pointSize: 0,
titleTextStyle: {
color: '#ff0000',
},
slantedText: true,
slantedTextAngle: 45
},
series: {
0: {
color: 'transparent',
type: 'line',
visibleInLegend: false,
enableInteractivity: false
}
},
vAxis: {
title: 'Kits'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
further adjustments can be made to get the tick mark below the x-axis,
use a negative dummy value, and tweak the y-axis to allow room for negative values...
(see vAxis options in the following snippet)
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'dumy');
data.addColumn({type:'string', role:'annotation'}); // interval role col.
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', -32, '', 925, 786],
['bbdasdas', -32, '', 652, 156],
['cbdasdas', -32, '', 300, 200],
['ddasdasb', -32, '', 925, 786],
['edasdb', -32, '', 652, 156],
['fasdasb', -32, '', 300, 200],
['gdasdasdb', -32, '', 925, 786],
['abdasdasa', -32, '', 925, 786],
['bbdasdas', -32, '', 652, 156],
['cbdasdas', -32, '', 300, 200],
['ddasdasb', -32, '', 925, 786],
['edasdb', -32, '', 652, 156],
['fasdasb', -32, '', 300, 200],
['gdasdasdb', -32, '', 925, 786]
]);
var options = {
annotations: {
stem: {
color: '#000000'
},
style: 'line',
textStyle: {
fontSize: 10
},
},
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height: 600,
chartArea: {
height: 300,
top: 100
},
hAxis: {
title: 'Departamentos',
pointSize: 0,
titleTextStyle: {
color: '#ff0000',
},
slantedText: true,
slantedTextAngle: 45
},
series: {
0: {
color: 'transparent',
type: 'line',
visibleInLegend: false,
enableInteractivity: false
}
},
vAxis: {
ticks: [0, 500, 1000, 1500, 2000],
title: 'Kits',
viewWindow: {
min: -64
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>