Search code examples
chartsgoogle-apigoogle-visualization

Google visualization Chart x-axis not shown properly


Anyone have idea how to make the x-axis label shown properly like this ---> correct x-axis

Currently x-axis label shown like this ---> xAxis not shown properly It look like the x-axis lable is force to hide it.

This is my google chart code:

var ComboChart = new google.visualization.ChartWrapper({
          'chartType': 'ComboChart',
          'containerId': 'chart_div',

          'options': {
                       
              title: 'Weekly Yield',
         
              hAxis: {
         maxAlternation:8,
          showTextEvery:0,  
          slantedText:true,
          slantedTextAngle:90,

              },
     seriesType: "bars",
    series: { 1: {type: "line"}},    
          vAxis: {
                'title': 'Final Yield %',
                'titleColor':'#cc0000',
                        'titleFontSize':20
              }  
                  
          },
    'view': {'columns': [1,4,5]}
    });


    var ScatterChart = new google.visualization.ChartWrapper({
          'chartType': 'ScatterChart',
          'containerId': 'chart_div2',

          'options': {
            
            colors: ['#e0440e'],
              title: 'Weekly Delta',
         
              hAxis: { 
          slantedText:true,
          slantedTextAngle:90
              },
     
          vAxis: {
                'title': 'Delta',
                'titleColor':'#cc0000',
             gridlines: {count: 10},
                        'titleFontSize':20,
                            viewWindow: {

              
                   interval: 1,
                },

              }           
          },
   'view': {'columns': [1,6]}
    });            

Solution

  • try adding more room to the bottom of the chart,
    using the following option...

    chartArea: {
      bottom: 72
    }