Chart width is jumping on series change from area to candles

[iksent]

Lightweight Charts Version: ^3.7.0

Actual behavior:

Width jumping on series change, see the next video:

2021-12-17.15.50.29.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

[timocov]

@iksent can you provide complete example on https://codesandbox.io please?

[iksent]

Ouch. Do you already have an example with switching between candlesticks and area/line types?

[timocov]

No, I don't think so.

[iksent]

https://jsfiddle.net/iksent/rxpcd0eL/

• I only ran into this problem with certain data.
• Options and configs, in my opinion, do not affect this.
• Area => Canldes = OK
• Candles => Area = Double jump

[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

[iksent]

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