Open mozeryansky opened 8 months ago
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.
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.
Here's the release notes: https://tradingview.github.io/lightweight-charts/docs/release-notes#410