ReactJS-Plotly Charts not Completely FIlling Container

Question

I am working with React-Plotly currently, and it appears that my charts always have a white space around each of them like margins. I have tried to specifically set no margins in the plot, use CSS, I have auto-size and responsive both set as true as well. When inspecting the component, it does not appear to have margins either, the component for the chart just seems to much smaller than the , as I will demonstrate in screenshots.

MainPage.js - this file holds the component that loads in the graph.

        <Row>
            <Col lg='4'>
                <ChartContainer chartType='treemap' />
            </Col>
            <Col lg='4'>
                <ChartContainer chartType='line' />
            </Col>
            <Col lg='4'>
                <ChartContainer chartType='line' />
            </Col>
        </Row>
        <Row>
            <Col lg='4'>
                <ChartContainer chartType='table' />
            </Col>
            <Col lg='4'>
                <ChartContainer chartType='table' />
            </Col>
            <Col lg='4'>
                <Row>
                    <Col className='h-50' lg='12'>
                        <ChartContainer chartType='table' />
                    </Col>
                </Row>
                <Row>
                    <Col  className='h-50' lg='12'>
                        <ChartContainer chartType='table' />
                    </Col>
                </Row>
            </Col>
            
        </Row>

ChartContainer.js - this file loads in the specific chart component depending on props.

import React from 'react'
import {
    Card,CardHeader, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button
  } from 'reactstrap';
import LineChart from '../LineChart';
import Table from '../Table';
import Treemap from '../Treemap';


const ChartContainer = ({chartType}) => {
    const displayChart = () => {
        if(chartType == 'treemap'){
            return <Treemap />
        } 
        else if(chartType == 'line'){
            return <LineChart />
        }else if(chartType == 'table'){
            return <Table />
        }
    } 
    return (
            <div>
                {displayChart()}
            </div>
    )
}

export default ChartContainer

All the charts exhibit the same behaviour, so I will just document 1 of them.

LineChart.js

import React from 'react'
    import Plotly from "plotly.js-strict-dist";
    import createPlotlyComponent from "react-plotly.js/factory";
    import {japan, canada, jhusa} from '../../tempdata'
    const Plot = createPlotlyComponent(Plotly);
    const LineChart = () => {
    
    return (
        <Plot
        data={[japan, canada, jhusa
        ]}
        layout={
          [{
            autosize: 'true',
             margin: {
              l: 0,
              r: 0,
              b: 0,
              t: 0,
              pad: 0
            },
          }]
        }
        style={{ width: '100%', height: '100%' }}
        config=
        {{ displayModeBar: false,responsive: true, }
        }
      />
    )
}
export default LineChart

Next, I will show screenshots of the components. (Images are linked below) In this first picture, you see that the large highlighted area is what I would like the chart to fill, except the actual chart is much smaller in the middle, and there appears to be a layer of margins around the graph itself. This is specified to be 0 in the code, and you can also see that there are no green or orange highlights here, meaning no padding or margins.

In the second picture, you can see the file structure of the plotly chart. The highlight remains the same as the first picture up until the layer. The layer above, still takes up the proper, large container like the first. I would like the layer, which highlights the graph itself, to fill up the larger container. Note, this behaviour stays the same with all the rest of the graphs too. Thanks for taking the time to read this and please feel free to drop any comments or questions that can help.

Showing the larger container that needs to be filled.

Showing area that graph takes up that is too small

How would I get the inner graph's size to push out to the outer container?