Столбцы 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>
    )
  }

это результат, который я получаю

0 ответов

Другие вопросы по тегам