'Bar isn't a property of type google.charts but chart gets displayed
I am trying to use Material Design to build a dual stacked bar chart using Typescript and react-google-charts.
This is what I've tried : https://codesandbox.io/s/google-charts-playground-forked-xr60b?file=/src/App.tsx
export default function App() {
const Header: Array<Array<any>> = [
[
{ type: "datetime", label: "Month" },
{ type: "number", label: "Compnay A - Top 1 Product" },
{ type: "number", label: "Compnay A - Top 2 Product" },
{ type: "number", label: "Other - Top 1 Product" }, // 3rd data table column
{ type: "number", label: "Other - Top 2 Product" }
]
];
const testData: Array<Array<any>> = [
[new Date(2021, 1, 1), 30, 40, 20, 40],
[new Date(2021, 2, 1), 10, 20, 30, 40]
];
const Options = {
isStacked: true,
series: {
// 3rd data table column
2: {
targetAxisIndex: 1
},
// 4th data table column
3: {
targetAxisIndex: 1
}
}
};
return (
<div className="App">
<Chart
data={Header.concat(testData)}
chartType="Bar"
options={google.charts.Bar.convertOptions(Options)}
/>
</div>
);
Sometimes I see my graph, but even though I see - there is an error on the console Bar is not a property of charts. Which if I look at the docs ofDefinitelyTyped is valid.
How is that rendered if this is undefined? If I enable strict on another project, I get a complain about either cannot find google or bar is not a property of charts.
What am I missing?
When this is working, this is what I see :
PS : I started with a Javascript solution as shown here which sometimes work, and sometimes it also gives me an error for cannot find google.
I tried installing @types/google-visualization but error comes and go.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

