google chart line number with at least 5 decimal places

Question

That's my google line chart: enter image description here How to see number with at least 5 decimal places? I need to have a detailed line chart.

I am also wondering how to create more white space because my website's background can't be white. So now it looks like unesthetic cut.

And my code:

      google.charts.load("44", {packages:["line"]});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'id ');
  data1.addColumn('number', 'C1  ');
    data1.addRows([
    {% for id, qir in data1 %}
        [{{ id }}, {{ qir }}],
        {% endfor%}
]);

 var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'id ');
  data2.addColumn('number', 'C2  ');
    data2.addRows([
 {% for id, qir in data2 %}
        [{{ id }}, {{ qir }}],
        {% endfor%}
]);

 var data3 = new google.visualization.DataTable();
  data3.addColumn('number', 'id ');
  data3.addColumn('number', 'C3  ');
    data3.addRows([
 {% for id, qir in data3 %}
        [{{ id }}, {{ qir }}],
        {% endfor%}
]);

  var options1 = {
    width: 900,
    height : 400,
    axes: {
        x: {
            0: {side: 'down'}
        }
    }
  };

      var options2 = {
    width: 600,
    height : 200,
    axes: {
        x: {
            0: {side: 'down'}
        }
    }
  };
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1,2], [1]);
  var chart1 = new google.charts.Line(document.getElementById('wykres1'));

chart1.draw(joinedData2, options1);

}

---

@app.route('/so')
def so():
    Data1 = [(1,0.244543243223),(2,0.343454312334),(3,0.6543223411),(4,0.34231342342314),(5,0.454343343223),(6,0.5434221),(7,0.54324324314),(8,0.45324517),(9,0.543222321),(10,0.54325445519)]
    Data2 = [(1,0.43654362),(2,0.46547543),(3,0.65475431),(4,0.65765454434),(5,0.6765443),(6,0.4654436),(7,0.3534657),(8,0.524343434),(9,0.453455532),(10,0.54354354358)]
    Data3 = [(1,0.5345524),(2,0.6543453432),(3,0.53453465645614),(4,0.63245524),(5,0.543543536533), (6,0.53454355334),(7,0.242354531),(8,0.3424543523),(9,0.5436536544),(10,0.5425345332)]
    return render_template('so.html', data1=Data1, data2=Data2, data3=Data3)

Answer 1

Use a NumberFormat to get 5 decimals.

As for whitespace, you can adjust the ChartArea dimensions on a Core Chart.
However, it doesn't appear to work on a Material Chart.
Even with google.charts.Line.convertOptions...

Here, I provide both and set background colors to highlight the difference...

google.charts.load('44', {
  callback: drawChart,
  packages: ['line', 'corechart']
});

function drawChart() {
  var data1 = google.visualization.arrayToDataTable(
    [['id', 'C1'],[1,0.244543243223],[2,0.343454312334],[3,0.6543223411],[4,0.34231342342314],[5,0.454343343223],[6,0.5434221],[7,0.54324324314],[8,0.45324517],[9,0.543222321],[10,0.54325445519]]
  );

  var data2 = google.visualization.arrayToDataTable(
    [['id', 'C2'],[1,0.43654362],[2,0.46547543],[3,0.65475431],[4,0.65765454434],[5,0.6765443],[6,0.4654436],[7,0.3534657],[8,0.524343434],[9,0.453455532],[10,0.54354354358]]
  );

  var data3 = google.visualization.arrayToDataTable(
    [['id', 'C3'],[1,0.5345524],[2,0.6543453432],[3,0.53453465645614],[4,0.63245524],[5,0.543543536533], [6,0.53454355334],[7,0.242354531],[8,0.3424543523],[9,0.5436536544],[10,0.5425345332]]
  );

  // format numbers in second column to 5 decimals
  var formatter = new google.visualization.NumberFormat({
    pattern: '#,##0.00000'
  });
  formatter.format(data1, 1);
  formatter.format(data2, 1);
  formatter.format(data3, 1);

  var options1 = {
    backgroundColor: 'yellow',
    width: 900,
    height: 600,
    chartArea: {
      backgroundColor: 'cyan',
      height: 400,
      left: 100,
      top: 100,
      width: 640
    },
    axes: {
      x: {
        0: {side: 'down'}
      }
    },
    vAxis: {format: '#,##0.00000'}
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
  var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1,2], [1]);

  var chart1 = new google.charts.Line(document.getElementById('wykres1'));
  // convert options for 'Material' chart
  chart1.draw(joinedData2, google.charts.Line.convertOptions(options1));

  var chart2 = new google.visualization.LineChart(document.getElementById('wykres2'));
  chart2.draw(joinedData2, options1);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<label>Material Chart</label>
<div id="wykres1"></div>
<label>Core Chart</label>
<div id="wykres2"></div>