Google Chart Bar chart is rendered outside of the chart canvas

When there is a high value like one million, the bar chart is not rendered. If you inspect the element is with a x value too negative:

Here is the code that I used to reproduce this issue:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      
      function drawChart() {
        const data = new google.visualization.DataTable();
        
        data.addColumn('string', 'Expense');
        data.addColumn('number', 'Paid');
        data.addRows([
          //['Amazon', 100_000] //it works
          ['Amazon', 1_000_000]
        ]);
      
        const chart = new google.visualization.BarChart(document.getElementById('barChart'));
        
        chart.draw(data, null);
      }
      
    </script>
    <title>Google Charts Issue</title>
  </head>
  <body>
    <div id="barChart"/>
  </body>
</html>

Does anyone know how to avoid this issue? I've just was able to solve using a logScale, but I cannot use this solution because it would be complicate to explain to the app users.

Google Chart Bar chart is rendered outside of the chart canvas

0 Answers