Upgrade to [email protected]

[mozeryansky]

Here's the release notes: https://tradingview.github.io/lightweight-charts/docs/release-notes#410

[trash-and-fire]

Yes, sure. You can use the new version and some parts of the API right now. I'm looking for the best approach to implement <CustomSeries> and <SeriesPrimitive> into the svelte-wrapper repository and will do the same here asap.

[mozeryansky]

You set the peerDependencies to ">=4.0.0", so I was able to use 4.1.0. It's been working fine for me and I meant to post back here when I got it all setup. For 4.1.0 they also made it easier to sync the cursor and I just got that all working too.

Based off their example from here: https://tradingview.github.io/lightweight-charts/tutorials/how_to/set-crosshair-position

This is how I did the same with the wrapper library:

  const ref1 = useRef<IChartApi>(null)
  const ref2 = useRef<IChartApi>(null)

  const seriesRef1 = useRef<ISeriesApi<any>>(null)
  const seriesRef2 = useRef<ISeriesApi<any>>(null)

  function syncCrosshair(
    otherRef: RefObject<IChartApi>,
    otherSeries: RefObject<ISeriesApi<any>>
  ) {
    return (param: MouseEventParams<HorzScaleItem>) => {
      const otherData = otherSeries.current?.data() || []
      const point = otherData.find(point => point.time == param.time)
      if (!point) return
      otherRef.current?.setCrosshairPosition(
        point.value,
        point.time,
        otherSeries.current!
      )
    }
  }

  function syncVisibleRange(ref: RefObject<IChartApi>) {
    return (timeRange: LogicalRange | null) => {
      if (!timeRange) return
      ref.current?.timeScale().setVisibleLogicalRange(timeRange)
    }
  }

      <div className="gap-2 overflow-auto rounded-lg border">
        <Chart
          container={{ style: { height: '400px' } }}
          autoSize
          ref={ref1}
          onCrosshairMove={syncCrosshair(ref2, seriesRef2)}
          timeScale={{ visible: false }}
          crosshair={{ mode: 0 }}
        >
          <CandlestickSeries data={candleData} ref={seriesRef1} />
          <TimeScale onVisibleLogicalRangeChange={syncVisibleRange(ref2)} />
        </Chart>

        <Chart
          container={{ style: { height: '200px' } }}
          autoSize
          ref={ref2}
          onCrosshairMove={syncCrosshair(ref1, seriesRef1)}
          rightPriceScale={{ minimumWidth: 66 }}
        >
          <HistogramSeries
            data={volume}
            priceScaleId="overlay"
            color="#26a69a"
            priceFormat={{ type: 'volume' }}
            ref={seriesRef2}
          />
          <TimeScale onVisibleLogicalRangeChange={syncVisibleRange(ref1)} />
        </Chart>
      </div>

It'd be cool if the wrapper could handle the syncing code, but it's fairly minimal code anyway.