CODEWITHSUNDEEP
chartsgoogle-visualization
user2610333
user2610333

Reputation: 65

Google Charts change axis line and text color

My google bar chart options variable is:

var Baroptions = {
legend: {position: 'none'},
hAxis: {
    textPosition: 'none',
    gridlines: {
        color: "#FFFFFF"
    },
    baselineColor: '#FFFFFF'
},
bars: 'horizontal',
animation:{
duration: 500,
easing: 'out',
}
};

But axis line and text are still being displayed. Rendered Graph

I need to remove that 0 and 50k text.

Regards

Upvotes: 2

Views: 6050

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

instead of --> textPosition: 'none'

try... 

  textStyle: {
    color: "#FFFFFF"
  },

see following working snippet... 

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

function drawChart() {
  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', '');
  dataTable.addColumn('number', 'Value');
  dataTable.addRows([
    ['18-25', 25],
    ['26-35', 46],
    ['36-45', 30],
    ['46-55', 10],
    ['55 Above', 7]
  ]);

  var Baroptions = {
    legend: {position: 'none'},
    hAxis: {
      textStyle: {
        color: "#FFFFFF"
      },
      gridlines: {
        color: "#FFFFFF"
      },
      baselineColor: '#FFFFFF'
    },
    bars: 'horizontal'
  };

  chart.draw(dataTable, google.charts.Bar.convertOptions(Baroptions));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

also, not sure from the question, but if using a material chart as in the above example

animation.* is among the several options that don't work on material charts

Upvotes: 3

Related Questions