Search code examples
chartsgoogle-visualizationbubble-chart

How to set the "X" and "Y" range

I would like to set the min and max for the chart.

Currently, the range of the x and y axis are dependent on the data that is provided to the chart. Although, I would like to have that fixed.

See the chart below

enter image description here

I would like the min and max of the chart to be at "5"

Solution

  • from the configuration options, you can use the following... 

        hAxis: {
      viewWindow: {
        min: 0,
        max: 5
      },
      ticks: [0, 1, 2, 3, 4, 5]
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 5
      },
      ticks: [0, 1, 2, 3, 4, 5]
    }

    see following working snippet... 

    google.charts.load('current', {
  callback: function () {
    new google.visualization.ScatterChart(document.getElementById('chart_div')).draw(
      google.visualization.arrayToDataTable([
        ['X', 'Y'],
        [1, 1]
      ]),
      {
        hAxis: {
          viewWindow: {
            min: 0,
            max: 5
          },
          ticks: [0, 1, 2, 3, 4, 5]
        },
        vAxis: {
          viewWindow: {
            min: 0,
            max: 5
          },
          ticks: [0, 1, 2, 3, 4, 5]
        }
      }
    );
  },
  packages:['corechart']
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>