LineChart not loading (using number column as filterColumnIndex) while using ChartRangeFilter control type.

[Girish Pasupuleti]

Hi,

Below is the URL for sandbox (related to the issue) and also attached is the screenshot of issue:

https://codesandbox.io/s/rakannimerreact-google-charts-linechart-bwsx3

Trying to use ChartRangeFilter controlType for LineChart in our app. Using filterColumnIndex: 1 as column 0 is of string type.  Am i doing something wrong related with options? .

Below is the source code:

import React from "react";

import ReactDOM from "react-dom";

import Chart from "react-google-charts";

// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram

const data = [

["day", "Sales", "Expenses"],

["day 1", 660, 400],

["day2", 1000, 460],

["day3", 1200, 1120],

["day4", 1330, 540]

];

const options = {

title: "Company Performance",

selectionMode: "multiple",

pointSize: 7,

curveType: "function"

};

class App extends React.Component {

render() {

return (

<div className="App">

<Chart

chartType="LineChart"

width="100%"

height="400px"

data={data}

options={options}

controls={[

{

controlType: "ChartRangeFilter",

options: {

filterColumnIndex: 1,

ui: {

chartType: "LineChart",

chartOptions: {

curveType: "function",

chartArea: { width: "90%", height: "50%" },

hAxis: { baselineColor: "none" }

}

},

view: {

columns: [1, 2]

}

},

controlPosition: "bottom"

}

]}

/>

</div>

);

}

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);