CODEWITHSUNDEEP
htmlchartsgoogle-visualization
ItsMeGokul
ItsMeGokul

Reputation: 432

Google Charts - How to reduce the plot area without increasing the chart size

I have a DIV element in HTML to display a Google trend chart. 

<div style="height: 300px; width: 100%; background-color: powderblue" id="trendchart">

Problem:

But values of my Horizontal axis are too long and so I made them aligned to be slanting at 45 degrees.

hAxis: {title: 'Execution Date', direction:-1, slantedText:true, slantedTextAngle:45},

Now, since the h axis values are bigger, they are barely visible in the chart:

The H Axis values are barely visible

I cannot make the H axis values visible until I make the div height 1400px and that takes almost all of my page.

My question:

How to reduce the plot area without increasing the chart size?

Upvotes: 2

Views: 505

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

you can use option --> chartArea
which has properties for...
top, bottom, left, & right

in this case, set chartArea.bottom to the number of pixels needed,
see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y0');
  data.addRows([
     ['Item 001', 200],
     ['Item 002', 220],
     ['Item 003', 240],
     ['Item 004', 260],
     ['Item 005', 280],
     ['Item 006', 300]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    chartArea: {
      bottom: 80
    },
    hAxis: {
      slantedText: true
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 4

Related Questions