Format numbers on google bar chart with dual x-Axes (decimal)

Question

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!

score 2 · Accepted Answer · answered Oct 14 '17 at 00:19

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>

hope this helps, with _Material_, be sure to use `convertOptions` before drawing... — WhiteHat, Oct 14 '17 at 00:19
This helps definitely! I did try the `hAxis: { format: '#,##0.00000' }` option, but didn't know about `convertOptions`. This solved my problem, by formatting both axes. — Chris, Oct 15 '17 at 08:02

Format numbers on google bar chart with dual x-Axes (decimal)

1 Answers1