проблема с многосерийной гистограммой данных с использованием повторных диаграмм

Question

поэтому я создал эти данные:

const dummy = [
    {
      name:'hello',
      style:'#57c0e8',
      data: [
        { day: 23, value: 100 },
        { day: 24, value: 110 },
        { day: 25, value: 115 },
        { day: 26, value: 112 },
        { day: 27, value: 108 },
        { day: 28, value: 95 },
        { day: 29, value: 99 },
        { day: 30, value: 89 },
        { day: 31, value: 124 },
      ]
    },
{
      name:'Good Day',
      style:'#57c0e8',
      data: [
        { day: 23, value: 80 },
        { day: 24, value: 83 },
        { day: 25, value: 65 },
        { day: 26, value: 72 },
        { day: 27, value: 79 },
        { day: 28, value: 93 },
        { day: 29, value: 96 },
        { day: 30, value: 91 },
        { day: 31, value: 46 },
      ]
    }
]

что я пробовал:

<BarChart
        width={500}
        height={300}
        data={dummy}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="day" type="category" />
        <YAxis dataKey="value" type="number"/>
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill="#8884d8" />
<Bar dataKey="value" fill="green" />
      </BarChart>

я думаю, что тип данных, который я ввел, подходит для повторных диаграмм cz я попробовал это с помощью строки график, и он работал отлично, но когда я попробовал его с гистограммой, он не работал, почему?

Answer 1

Я решил свою проблему, используя это для всех, у кого в будущем будет такая же проблема:

<BarChart
        width={1000}
        height={300}
        data={systolicAndDiastolicAndPulseAverage}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="5 0" tickSize={15} />
        <XAxis dataKey="day" type="category" tickLine={false} allowDuplicatedCategory={false}/>
        <YAxis dataKey="value" type="number"  allowDuplicatedCategory={false}/>
        <Tooltip />
        <Legend />
        {systolicAndDiastolicAndPulseAverage.map(s => (
            // console.log(s)
          <Bar dataKey="value" data={s.data} name={s.name} fill={s.style}/>          
       ))}
      </BarChart>

Answer 2

Свойство BarChart data должно быть массивом, а не документами объекта https://recharts.org/en-US/api/BarChart#data

попробуйте изменить dummy переменную, удалив свойство data внутри

const dummy = [
  {
    name:'hello',
    style:'#57c0e8',
    day: 23, value: 100
  },
  {
    name:'hello',
    style:'#57c0e8',
    day: 24, value: 110
  },
  {
    name:'hello',
    style:'#57c0e8',
    day: 25, value: 115
  },
  ...
  {
    name:'Good Day',
    style:'#57c0e8',
    day: 23, value: 80
  },
  {
    name:'Good Day',
    style:'#57c0e8',
    day: 24, value: 83
  }
  ...
]