I am using the same chart component in the tabs. When the page opens the chart in the first tab looks normal size and when I click the second tab my second chart looks smaller. The size of the chart changes. And when I click a filter button for the chart, the chart comes in the right size. The chart in the first tab:

The second tab:

How can I solve this problem?

chart

<div
            style={{
              alignItems: "center",
              justifyContent: "center",
              alignSelf: "center",
              alignContent: "center",
              margin: "auto 0",
              marginLeft: "5%",
            }}
          >
            <Chart
              style={{ margin: "auto 0" }}
              width={"100%"}
              height={"460px"}
              chartType="LineChart"
              loader={<div>Chart Yükleniyor</div>}
              data={a}
              options={{
                backgroundColor: "transparent",
                titleTextStyle: { color: col1 },
                hAxis: {
                  textStyle: { color: col1 },
                  gridlines: { color: col1 },
                  color: col1,
                  baselineColor: col1,
                  direction: "-1",
                },
                vAxis: {
                  textStyle: {
                    color: col1,
                  },
                },
                title: spectitle,
                series: [...titleIndex].reverse().map((a) => ({
                  color: colors[a.i],
                })),
                lineWidth: 4,
                legend: "none",
                pointSize: 6,
              }}
            />
            {this.props.titles.map((title, index) => (
              <Button
                ...
                filters
                ...
              </Button>
            ))}
          </div>