Высота диаграммы прыгает под нагрузкой - PullRequest
Новая
       6

Высота диаграммы прыгает под нагрузкой

0 голосов
/ 24 октября 2018

Я использую перезарядки в своем компоненте.При загрузке сама CartesianGrid, похоже, игнорирует легенду и тянется до самого верха, чтобы заполнить всю высоту.Через долю секунды его высота становится такой, какой она должна быть (учитывая, что у Legend есть собственная высота, CartesianGrid становится короче).Вы можете увидеть скриншоты ниже. Начальная загрузка Нормальная

Как я могу зафиксировать начальную высоту, чтобы она не прыгала при загрузке?

Вот код. 

<BarChart
            stackOffset="sign"
            width={isWindowSizeSmall ? 72 * (this.state.baseFontSize || 1) : 27 * (this.state.baseFontSize || 1)}
            height={isWindowSizeSmall ? 17 * (this.state.baseFontSize || 1) : 19 * (this.state.baseFontSize || 1)}
            data={this.state.spendingsData}
            margin={{ top: 0, left: 0, bottom: 0, right: 10 }}
            isAnimationActive={false}
          >
            <Legend
              align="center"
              verticalAlign="top"
              height={30}
              wrapperStyle={{
                paddingLeft: '10%',
              }}
            />
            <CartesianGrid strokeDasharray="7 7" vertical={false} />
            <XAxis
              strokeWidth={1.5}
              dataKey="name"
              interval={0}
              tick={{
                transform: 'translate(0, 8)',
                fontSize: '.7rem',
              }}
            />
            <YAxis strokeWidth={1.5} />
            <Tooltip
              content={({ payload }) => (
                <div className="tooltip">
                  <div className="month">
                    {momentTz(payload[0] && payload[0].payload.month, 'MM').format('MMMM')}
                  </div>
                  <div className="assigned">Revenue: ${parseInt(payload[0] && payload[0].payload.wage, 10)}</div>
                  <div className="unfilled">Expense: ${parseInt(payload[0] && payload[0].payload.fee, 10)}</div>
                  <div className="total">Total: ${parseInt(payload[0] && payload[0].payload.total, 10)}</div>
                </div>
                    )}
            />
            <ReferenceLine y={0} stroke="#000" />
            <Bar barSize={25} isAnimationActive={false} dataKey="fee" stackId="a" fill="#DC6C52" />
            <Bar barSize={25} isAnimationActive={false} dataKey="wage" stackId="a" fill="#5CA6FA" />
          </BarChart>

Изменение параметров высоты не помогает.

...