reactjs - Google chart range selector chart type as column chart

Question

In the example I added a column chart with range selector. I changed the chartType of range selector to ColumnChart. But its not changing to column chart. can some one help on this.

Also is there is any way to customize the design of the range selector as in this image.

Answer 1

valid chart types for the ChartRangeFilter are...

ui.chartType = 'AreaChart', 'LineChart', 'ComboChart' or 'ScatterChart'

in this case, use...

'ComboChart'

then set chart option...

ui.chartOptions.seriesType = 'bars'

e.g.

var control = new google.visualization.ControlWrapper({
  controlType: 'ChartRangeFilter',
  containerId: 'control',
  options: {
    filterColumnIndex: 0,
    ui: {
      chartType: 'ComboChart',
      chartOptions: {
        seriesType: 'bars'
      }
    }
  }
});