
import {
init,
dispose,
Chart,
DeepPartial,
IndicatorFigureStylesCallbackData,
Indicator,
IndicatorStyle,
KLineData,
utils,
} from “klinecharts”;

const chart = useRef<Chart|null>();
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
chart.current = init(chart-${tradeId}, {styles: chartStyles});

return () => dispose(chart-${tradeId});
}, [tradeId]);
useEffect(() => {
chart.current?.applyNewData(candles);
chart.current?.overrideIndicator({
name: “VOL”,
shortName: “Объем”,
calcParams: [],
figures: [
{
key: “volume”,
title: “”,
type: “bar”,
baseValue: 0,
styles: (data: IndicatorFigureStylesCallbackData<Vol>, indicator: Indicator, defaultStyles: IndicatorStyle) => {
const kLineData = data.current.kLineData as KLineData;
let color: string;

if (kLineData.close > kLineData.open) {
color = utils.formatValue(indicator.styles, “bars[0].upColor”, (defaultStyles.bars)[0].upColor) as string;
} else if (kLineData.close < kLineData.open) {
color = utils.formatValue(indicator.styles, “bars[0].downColor”, (defaultStyles.bars)[0].downColor) as string;
} else {
color = utils.formatValue(indicator.styles, “bars[0].noChangeColor”, (defaultStyles.bars)[0].noChangeColor) as string;
}

return {color};
},
},
],
}, paneId.current);
chart.current?.createIndicator(“VOL”, false, {id: paneId.current});
chart.current?.setPriceVolumePrecision(+pricePrecision, +quantityPrecision);
}, [candles]);

<Box
ref={ref}
id={chart-${tradeId}}
width=“calc(100% - 55px)”
height={!handle.active ? 550 : “100%”}
sx={{borderLeft: “2px solid #F5F5F5”}}
/ >

библиотека klinecharts, график размытый какой-то, как можно добавить четкости графику?