I want to show different texts on x-axis ticks and in tooltip, I tried setting up tick object in my data as {v: '2010', f: 'abc'}, but google column chart uses 'f' property for both axis label and tooltip. I want it to use 'v' for tooltip and 'f' for labels on x-axis. Is there any option available to achieve this. Below is my simple reproduceable example.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
[{v: '2010', f: 'abc'}, 10, 24, 20, 32, 18, 5, ''],
[{v: '2020', f: 'deg'}, 16, 22, 23, 30, 16, 9, ''],
[{v: '2030', f: 'ghi'}, 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
format: function (val) {
console.log('val', val);
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
} <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
instead of using a string for the value: '2010'
you'll need to use a number: 2010
this will allow you to customize the ticks in the options...
hAxis: {
ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}
hAxis.ticks does not work when the x-axis value is a string
as for the tooltip, you can use the number value,
but here, I included the object notation,
so a comma is not displayed in the tooltip: 2,010
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],
see following working snippet...
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],
[{v: 2020, f: '2020'}, 16, 22, 23, 30, 16, 9, ''],
[{v: 2030, f: '2030'}, 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>