Estoy tratando de usar Material Design para construir un gráfico de barras apiladas dobles usando Typescript y react-google-charts .

Esto es lo que probé: 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> );

A veces veo mi gráfico, pero aunque lo veo, hay un error en la consola. La Bar is not a property of charts . Lo cual si miro los documentos de DefinitelyTyped es válido.

¿Cómo se representa eso si esto no está definido? Si habilito estricto en otro proyecto, recibo una queja sobre que cannot find google o bar is not a property of charts .

¿Qué me estoy perdiendo?

Cuando esto funciona, esto es lo que veo:

PD: comencé con una solución de Javascript como se muestra aquí , que a veces funciona y, a veces, también me da un error porque cannot find google .

Intenté instalar @types/google-visualization pero el error aparece y desaparece.