Столбцы VictoryGroup отображаются неправильно
Я использую VictoryGroup в VictoryChart, который по какой-то причине не выполняет рендеринг внутри зависимой оси, т.е. когда имеется большой объем данных, столбцы выталкиваются за пределы зависимой оси, а также некоторые из них даже не отображаются. Я сделал некоторые расчеты, чтобы переполнить прокрутку, но, похоже, ничего не работает. Расчет отлично работает для VictoryBars и VictoryLine. результат, который я получаю, на консоли больше данных, чем на графике ] [1],
// CALCULATION OF GRAPH WIDTH WHEN DATA IS MORE //
const dataLength = props.data ? props.data.length : 0;
const crossAxisMargin = props.expandGraph ? 80 : 70;
const dataMultiplierConst = props.groupBy ? 20:40;
const graphFullWidth = props.graphWidth - crossAxisMargin;
const graphScrollableWidth =
dataLength * dataMultiplierConst < graphFullWidth ? graphFullWidth : dataLength * dataMultiplierConst;
const barWidth = 15;
const paddingRight = graphFullWidth - dataMultiplierConst * dataLength;
const customDomainPadding = paddingRight > 0 ? { x: [40, paddingRight] } : { x: [40, 40] };
console.log(props)
// ******************** //
if (props.groupBy) {
return (
<div>
{props.loading ? (
<Dimmer active inverted>
<Loader inverted content="Loading" />
</Dimmer>
) : null}
<VictoryChart
width={graphScrollableWidth}
domainPadding={{ x: [40, 40] }}
scale={{ y: props.chartScale }}
containerComponent={<VictoryContainer responsive={false} />}
>
<VictoryGroup
offset={15}
>
{props.data.map(d => (
<VictoryBar
key={d.x}
style={{
data: { fill: '#579466' },
labels: { fill: '#fff', fontSize: 12 }
}}
alignment="start"
barWidth={10}
data={[d]}
labelComponent={<CustomTooltip />}
/>
))}
</VictoryGroup>
</VictoryChart>
</div>
)
}