Chart width is jumping on series change from area to candles

Lightweight Charts Version: ^3.7.0

Actual behavior:

Width jumping on series change, see the next video:

https://user-images.githubusercontent.com/32956521/146533627-7bdf6313-e766-4b77-8b0f-b9407c8b3632.mov

Expected behavior:

No width jumping.

Steps/code to reproduce:

import React, { useCallback, useEffect, useReducer, useRef } from 'react'
import { useOnResize } from 'Core/utils/useOnResize'
import {
  ChartOptions,
  createChart,
  DeepPartial,
  IChartApi,
  ISeriesApi,
  SeriesType,
} from 'lightweight-charts'
import { useChartStyles } from './styles'
import { ChartCandlestickShape, ChartCommonShape, ChartType } from './types'

type Props = {
  className?: string
  data: Array<ChartCommonShape> | Array<ChartCandlestickShape>
  options?: DeepPartial<ChartOptions>
  type: ChartType
}

function ChartLocal(props: Props): JSX.Element {
  const { className = '', data, options, type } = props
  const [, forceUpdate] = useReducer((p: number) => p + 1, 0)
  const chartStyles = useChartStyles()
  const prevChartStyles = useRef(chartStyles)

  const chartRef = useRef<HTMLDivElement | null>(null)
  const chart = useRef<IChartApi>()
  const series = useRef<ISeriesApi<SeriesType>>()

  const handleResize = useCallback(() => {
    if (chart.current && chartRef.current) {
      chart.current?.resize(
        chartRef.current.clientWidth,
        chartRef.current.clientHeight,
        true,
      )
      chart.current?.timeScale().fitContent()
    }
  }, [])

  useOnResize(handleResize, 50)

  useEffect(() => {
    if (chartRef.current !== null) {
      if (chart.current === undefined) {
        chart.current = createChart(chartRef.current, {
          height: chartRef.current.clientHeight,
          width: chartRef.current.clientWidth,
          ...chartStyles.basic,
          ...options,
        })
      }

      if (series.current) {
        chart.current?.removeSeries(series.current)
      }

      if (type === 'Candlestick') {
        series.current = chart.current?.addCandlestickSeries(chartStyles.candle)
      } else {
        series.current = chart.current?.addAreaSeries(chartStyles.area)
      }

      if (data) {
        series.current?.setData(data)
      }

      chart.current?.timeScale().resetTimeScale()
      chart.current?.timeScale().fitContent()
      forceUpdate() // Update for tooltip
    }
  }, [chartRef.current, data, chartStyles])

  return (
    <div ref={chartRef} className={className}/>
  )
}

export default ChartLocal

[iksent]

I can confirm this issue is fixed, thanks a lot, @timocov!

[timocov]

@iksent thanks! btw, if you add a new series first and then remove the old one it seems that it works fine. but this is quite strange for sure