rrag / react-stockcharts

Highly customizable stock charts with ReactJS and d3
http://rrag.github.io/react-stockcharts
MIT License
3.87k stars 957 forks source link

CandlestickSeries and BarSeries don't adjust bar width (fatness) automatically #737

Open MaxYari opened 4 years ago

MaxYari commented 4 years ago

Just updated to if 0.7.8. When CandlestickSeries is used without width={timeIntervalBarWidth(utcDay)} - chart displays thin lines without candle body. In previous versions, candle width was adjusting to timeframe automatically which was quite handy.

MaxYari commented 4 years ago

Bump: Any info regarding this?

MaxYari commented 4 years ago

Ok, I solved it by building a map of d3-time timeIntervals for possible dataset time periods. Given I already have dataset time period strings - here's an example:

import { last, timeIntervalBarWidth } from "react-stockcharts/lib/utils";
import { utcDay, utcMinute, utcHour } from "d3-time";
...

var periodToTimeIntervalMap = {
    "1m": utcMinute,
    "5m": utcMinute.every(5),
    "30m": utcMinute.every(30),
    "1h": utcHour,
    "3h": utcHour.every(3),
    "1d": utcDay
}

var timeInterval = periodToTimeIntervalMap[state.dataset.period];
if (!timeInterval) timeInterval = utcMinute;

function barWidthAccessor() {
    return 0.8*timeIntervalBarWidth(timeInterval)(...arguments);
};

and then add a param to CandlestickSeries (or anything else that needs bar/candle width adjusted)

width={barWidthAccessor}

in barWidthAccessor() returned value is multiplied by 0.8 so bards will have a bit of space inbetween them.

MaxYari commented 4 years ago

Actually will leave it open, since my solution is a workaround and doesn't solve an underlying issue of absent width auto adjustment. Unless this feature removal was intended - in that case, feel free to close.