Google Charts - Apply margin on y-axis values

Question

What I'd like to do, is to increase the margin between the y-axis values and the corresponding bar within the chart.

So if I have a bar in the chart which has a value of "Python" on the Y- axis, I want to increase the space between the string "Python" and the visual bar.

Now:

Python__========================================================

My goal:

Python___________=========================================================

___ represents the space between y-axis label and visual bar

I tried to use chartArea{right:200} and textPosition:out in the options section of the chart.

    var options = {

        chartArea:{right: 200},


        'vAxis': {
            title:'',
            textStyle : {
                fontSize: 25 
            },
            textPosition: 'out'


        },




function drawChart() {
var data = google.visualization.arrayToDataTable([
['Coding-Skills', 'Skill-Level'],

['C', {v: 0.3, f:'low'}],
['Python', {v: 1, f:'medium'}],
['Javascript', {v: 1.5, f:'medium'}],
['HTML/CSS', {v: 1.5, f:'medium'} ]
]);

    var options = {

        chartArea: {
            left: 1400
        },
        'hAxis': {
            gridlines:{
            count: 0},

            textStyle : {
                fontSize: 25 
            }
        },

        'vAxis': {
            title:'',
            textStyle : {
                fontSize: 25 
            }

        },
      chart: {
      },
      bars: 'horizontal', 

    axes: {

        x: {
          0: { side: 'bottom', label: 'Years of experience'} ,
          textStyle : {
        fontSize: 35
    }

        }
      }
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }

Applying margin-right

Can you update your question to include a bit more details about what you want? And if relevant, what you have tried so far? — user2653663

WhiteHat WhiteHat · Accepted Answer · 2018-08-23T13:16:17

no options for label margins,
but you can move them manually on the chart's 'ready' event

find the labels and change the 'x' attribute

see following working snippet,
here, the chartArea option is used to ensure there is enough room...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Language', 'Skill-Level'],
    ['C', 20],
    ['Python', 35],
    ['Javascript', 50]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // move axis labels
      if (label.getAttribute('text-anchor') === 'end') {
        var xCoord = parseFloat(label.getAttribute('x'));
        label.setAttribute('x', xCoord - 20);
      }
    });
  });

  var options = {
    chartArea: {
      left: 100,
      right: 200
    },
    colors: ['#aaaaaa'],
    hAxis: {
      baselineColor: 'transparent',
      gridlines: {
        count: 0
      },
      textStyle: {
        color: '#aaaaaa'
      }
    },
    height: 400,
    legend: {
      textStyle: {
        color: '#aaaaaa'
      }
    },
    vAxis: {
      textStyle: {
        color: '#aaaaaa'
      }
    }
  };

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts - Apply margin on y-axis values

2 Answers