Kaktana / kaktana-react-lightweight-charts

A simple react wrapper for the tradingview lightweight charts module
MIT License
106 stars 55 forks source link

I don't think priceScaleId is working when set in the series #6

Closed burnside closed 3 years ago

burnside commented 4 years ago

I can't seem to get the priceScale of a combined histogramSeries and candlestickSeries to decouple.

chart options:

        const tvPriceOptions = {
            alignLabels: true,
            timeScale: {
                rightOffset: 0,
                barSpacing: 15,
                fixLeftEdge: false,
                lockVisibleTimeRangeOnResize: true,
                rightBarStaysOnScroll: true,
                borderVisible: false,
                borderColor: '#fff000',
                visible: true,
                timeVisible: true,
                secondsVisible: false
            },
            rightPriceScale: {
                scaleMargins: {
                    top: 0.3,
                    bottom: 0.25,
                },
                borderVisible: false,
            },
            priceScale: {
                autoScale: true,
            },
            watermark: {
                color: 'rgba(0, 0, 0, 0.4)',
                visible: true,
                text: 'TxQuick: ' + pair + ': ' + candlestickInterval,
                fontSize: 18,
                horzAlign: 'left',
                vertAlign: 'bottom',
            },
        };

        const seriesCandleTv = [{
            options: {
                priceScaleId: 'right',
                upColor: '#00AA00',
                downColor: '#AA0000',
                borderVisible: false,
                wickVisible: true,
                borderColor: '#000000',
                wickColor: '#000000',
                borderUpColor: '#00AA00',
                borderDownColor: '#AA0000',
                wickUpColor: '#00AA00',
                wickDownColor: '#AA0000',
                priceFormat: {
                    type: 'custom',
                    minMove: '0.00000001',
                    formatter: (price) => {
                        return parseFloat(price).toFixed(decimals);
                    }
                },
            },
            data: candlesticksTv,
        }];

        //TODO figure out priceScaleId so both charts can be combined...
        const seriesVolumeTv = [{
            options: {
                color: '#269ffb',
                priceScaleId: '',
                scaleMargins: {
                    top: 0.8,
                    bottom: 0,
                },
                priceFormat: {
                    type: 'custom',
                    minMove: '0.00000001',
                    formatter: (value) => {
                        return parseFloat(value).toFixed(6);
                    }
                },
            },
            data: volumeBarsTv,
        }];

chart tag:

<ChartTwo options={tvPriceOptions} histogramSeries={seriesVolumeTv} candlestickSeries={seriesCandleTv} autoWidth height={350} />

when it renders the volume bars and candlesticks share the same right hand scale and the volume bars completely overlap the candlesticks.

until I can figure this out I am just stacking two separate charts, but you can imagine how for many reasons this is less than ideal.

any thoughts are appreciated, thanks!

AurelReb commented 3 years ago

Sorry for the late reply. Are you still facing the issue? If so, could you please send a Codesandbox link so I can review your issue easily? Thanks

burnside commented 3 years ago

Unfortunately we have since shifted to an alternate charting software.

AurelReb commented 3 years ago

Ok, I close the issue then