Chart not rendering, just an empty div is added

Question

<div>
    <Chart
      chartType="ScatterChart"
      width="80%"
      height="400px"
      data={[
        ["Year", "Sales", "Expenses"],
        ["2004", 1000, 400],
        ["2005", 1170, 460],
        ["2006", 660, 1120],
        ["2008", 1030, 540],
        ["2009", 1000, 400],
        ["2010", 1170, 460],
        ["2011", 660, 1120],
        ["2012", 1030, 540],
      ]}
      options={{
        title: "Company Performance",
        curveType: "function",
        legend: { position: "bottom" },
      }}
    />
  </div>

I'm using npm i react-google-charts to use charts within a react app, when I run the application not seeing the chart in the UI also when i inspect can see just the empty div being rendered. No console errors or application error, app works fine. It'd be helpful if i can know what am i missing or doing wrong in the approach

Answer 1

Ensure that the parent container of the chart has sufficient width and height. If the container size is not set or set to zero, the chart may not be visible.

.chart-container {
  width: 100%;
  height: 400px;
}

And in your JSX file:

<div className="chart-container">
    <Chart
      chartType="ScatterChart"
      width="80%"
      height="400px"
      data={[
        ["Year", "Sales", "Expenses"],
        ["2004", 1000, 400],
        ["2005", 1170, 460],
        ["2006", 660, 1120],
        ["2008", 1030, 540],
        ["2009", 1000, 400],
        ["2010", 1170, 460],
        ["2011", 660, 1120],
        ["2012", 1030, 540],
      ]}
      options={{
        title: "Company Performance",
        curveType: "function",
        legend: { position: "bottom" },
      }}
    />
  </div>