my charts getting smaller automatically

[sai reddy]

import React, { useState, useEffect, Fragment } from "react";

import { Chart } from "react-google-charts";

import {DownloadOutlined} from '@ant-design/icons';

import Button from './Button';

const GoogleBubble = ({ hAxisLabel, vAxisLabel, chartData, chartTitle, printOption }) => {

const [chartWrapper, setChartWrapper] = useState(null);

print = () => {

let element = document.createElement("a");

if (chartWrapper === null) {

console.error("ChartWrapper not ready yet");

}

const image = chartWrapper.getChart().getImageURI();

element.href = image;

element.download = "chart.png";

element.click();

};

return (

<Fragment>

<div style={{textAlign:"right"}}>

{chartWrapper !== null && printOption && (

<Button onClick={print} download className="chart-download-button">

Download Chart<DownloadOutlined />

</Button>

)}

</div>

<Chart

width={"100%"}

height={"500px"}

chartType="BubbleChart"

loader={<div>Loading Chart</div>}

data={chartData}

options={{

title:`${chartTitle}`,

chartArea:{width:"70%",height:"80%"},

hAxis: {

title: `${hAxisLabel}`,

viewWindow: {

min: 0,

max: 100,

},

},

legend: {

position: "right",

textStyle: { color: "blue", fontSize: 16 },

},

animation: {

duration: 2000,

easing: "out",

startup: true,

},

series: {

Positive: { color: "#98D880" },

Negative: { color: "#cd5c5c" },

},

vAxis: {

title: `${vAxisLabel}`,

viewWindow: {

min: 0,

max: 100,

},

},

tooltip: {

// isHtml: true,

trigger: "both",

},

selectionMode: "multiple",

bubble: {

textStyle: { fontSize: 10, auraColor: "none", color: "#000" },

},

sizeAxis: { minSize: 20, maxSize: 50 },

}}

getChartWrapper={(chartWrapper) => {

setChartWrapper({ chartWrapper });

}}

/>

</Fragment>

);

};

export default GoogleBubble;