How is it possible to format the number values on a google bar chart with dual x-Axes? The top axes with the label support should have at least four decimal places, like the value shown in the tooltip.
What I have tried is this approach, but it doesn't seem to work.
My code:
data.addColumn('string', 'RuleName');
data.addColumn('number', 'Lift');
data.addColumn('number', 'Support');
for (var i = 0; i < chartsdata.length; i++) {
data.addRow([rule, Lift,Support)]);
}
// format numbers in second column to 5 decimals
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.00000'
}); // This does work, but only for the value in the tooltip.
formatter.format(data, 2);
// Passing in some options
var chart = new google.charts.Bar(document.getElementById('barChart'));
var options = {
title: "Association Rules by lift and support",
bars: 'horizontal',
series: {
0: { axis: 'Lift', targetAxisIndex: 0, },
1: { axis: 'Support', targetAxisIndex: 1}
},
axes: {
x: {
Lift: { label: 'Lift', format: '0,000' //Doesn't work, }, // Bottom x-axis.
Support: { side: 'top', label: 'Support' } // Top x-axis.
}
}, ..........
What I also tried is this approach from the google doc:
series:{hAxes:{1:{title:'abc', format: '0,0000'}}
Any help would be greatly appreciated!
there are several options that are not supported by Material charts
see --> Tracking Issue for Material Chart Feature Parity
although format
is not listed, there are several options not supported for --> {hAxis,vAxis,hAxes.*,vAxes.*}
so that could be the problem
note: the above options should stand alone and not be included in the series
option,
as seen in the question (What I also tried...)
you can change both x-axis formats by using hAxis.format
but don't think you'll be able to change just one
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'RuleName');
data.addColumn('number', 'Lift');
data.addColumn('number', 'Support');
for (var i = 0; i < 10; i++) {
data.addRow([i.toString(), i+2, i+3]);
}
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.00000'
});
formatter.format(data, 2);
var chart = new google.charts.Bar(document.getElementById('barChart'));
var options = {
chart: {
title: 'Association Rules by lift and support'
},
bars: 'horizontal',
series: {
0: {axis: 'Lift'},
1: {axis: 'Support'}
},
axes: {
x: {
Lift: {label: 'Lift'},
Support: {side: 'top', label: 'Support'}
}
},
hAxis: {
format: '#,##0.00000'
},
height: 320
};
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart"></div>