I am trying to build a usage bar chart using . I was wondering how can I maximize the range of the X-axis tick marks? I've tried doing that in the fiddle / using the suggestion from another post - set x Axis range in google chart but that did not work. This is what I added to the existing fiddle:

hAxis: {
        viewWindow: {
              max: 200
        },
        ticks: [0,50,100]
}

but that does not seem work. Any help would be much appreciated!

I am trying to build a usage bar chart using https://developers.google./chart/interactive/docs/gallery/barchart#top-x. I was wondering how can I maximize the range of the X-axis tick marks? I've tried doing that in the fiddle https://jsfiddle/gbta075L/ using the suggestion from another post - set x Axis range in google chart but that did not work. This is what I added to the existing fiddle:

hAxis: {
        viewWindow: {
              max: 200
        },
        ticks: [0,50,100]
}

but that does not seem work. Any help would be much appreciated!

• javascript
• charts
• google-visualization

1 Answer 1

I honestly dont know how to construct the ticks and viewWindow equivalences when using googles material bar charts. It is not so well documented and still in beta.

However, a nice trick is to use google.charts.Bar.convertOptions() which translates google visualization options into material chart options :

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

results in this

Which I assume is what you want.
forked fiddle -> https://jsfiddle/65bwmknu/