Autosize does not work by default

[alakhpc]

The autoSize prop doesn't seem to work by default, I believe the wrapping div needs

width: 100%;
height: 100%;

that makes it work.

[trash-and-fire]

Hello. Thanks for this find. I will review these changes.

Currently you can use:

<Chart container={{ style: { width: '100%', height: '100%' } }} autoSize>

In fact, you can pass whatever you want to the container and get a reference to it: https://github.com/trash-and-fire/lightweight-charts-react-wrapper/blob/master/packages/lib/src/components/chart.tsx#L22

[trash-and-fire]

I think I didn't specify a default height due to cases where the user might want to set the width and aspect-ratio instead of the height.

[mozeryansky]

I was having the same issue, but my case was a bit different as 100% wasn't working for me. This is what worked with my layout:

<div className="overflow-auto rounded-lg border">
  <Chart container={{ style: { height: '400px' } }} autoSize ref={ref}>
    <LineSeries data={data} />
  </Chart>
</div>

[trash-and-fire]

Please provide a reproducible example of the problem. I tried almost the same code and it works: https://codesandbox.io/s/codesandboxer-example-forked-48rz95?file=/example.tsx

[trash-and-fire]

Maybe I misunderstood you? Do you mean that the graph should adjust to the size of the wrapper container (in this case <div className="overflow-auto rounded-lg border">) without specifying container={{ style: { height: '400px' } }}?

[mozeryansky]

I was using TradingView's example and had implemented and working like this:

    useEffect(() => {
        ...
        const chart = createChart(chartContainerRef.current!, {
            width: chartContainerRef.current!.clientWidth,
            height: 400,
            autoSize: true,
        })
        ...
    }

    <div className="overflow-auto rounded-lg border">
      <div
        style={{ minHeight: '400px' }}
        ref={chartContainerRef as RefObject<HTMLDivElement>}
      />
    </div>

So when I transitioned to using your library I tried:

      <div style={{ minHeight: "400px" }}>
        <Chart autoSize container={{ style: { width: "100%", height: "100%" } }}>
          <CandlestickSeries data={data} />
        </Chart>
      </div>

And that wasn't working. When I inspected the style it showed '..., height: 0px, ...' but when I changed it to my comment above it works as expected.

I don't think you need to re-open this, I just wanted to mention what I did.