CODEWITHSUNDEEP
chartsgoogle-visualization
Vahid
Vahid

Reputation: 119

Google chart decrease Y axis labels width

I an trying to draw a chart using Google charts and i am facing an issue that i am not able to decrease the width of X axis labels. I have used chartArea in options as following. Still i am not able to fix it.

options = {
            height : 450,
            width: 1024,
            bar: { groupWidth: '80%' },
            bars: 'horizontal', // Required for Material Bar Charts.
            chartArea:{left:30,top:10,width:'80%'}              
        };

I am getting a result like this :Chart result

Upvotes: 2

Views: 2186

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

there are several options that are not supported by Material charts,

including --> chartArea.*

see Tracking Issue for Material Chart Feature Parity

recommend using Core chart instead, with the following option... 

theme: 'material'

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['High Blood Pressure', 1000, 400, 200],
    ['mmmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmm', 1170, 460, 250],
    ['Test 1', 660, 1120, 300],
    ['Test 2', 1030, 540, 350]
  ]);

  var options = {
    height : 450,
    width: 1024,
    bar: { groupWidth: '80%' },
    chartArea:{left:30,top:10,width:'80%'},
    theme: 'material'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 3

Related Questions