У меня есть компонент Recharts BarChart
с 3 различными значениями для каждого дня недели: primary
, secondary
и tertiary
. В некоторых случаях secondary
и tertiary
не имеют данных. Если данных нет, я бы хотел, чтобы указанные c Bar
компоненты, сопоставленные с этими ключами, вообще не отображались в эти указанные c дни, однако я изо всех сил пытаюсь найти какой-либо способ сделать это.
Я использую BarChart
примерно так:
<BarChart
width={700}
height={500}
data={data}
>
<XAxis dataKey="name" />
<YAxis />
<Bar dataKey="primary" fill="#009734" />
<Bar dataKey="secondary" fill="#D97800" />
<Bar dataKey="tertiary" fill="#C1BEBE" />
</BarChart>
Вот как мои данные выглядят в настоящее время:
[{
name: 'Tue',
primary: 8,
}, {
name: 'Wed',
primary: 7,
secondary: 5,
}, {
name: 'Thu',
primary: 12,
secondary: 9,
tertiary: 7,
}]
Когда отображается, я вижу это :
Однако я бы предпочел, чтобы вообще не добавлялись эти бесполезные бары в диаграмму, чтобы другие данные перемещались, чтобы быть более выровненными по центру и ежедневные графики сближаются:
Это грубое редактирование изображения, но я думаю, что оно иллюстрирует то, что я пытаюсь сделать.
Есть ли способ, которым я могу достичь этого с помощью Recharts?