Блог

У меня есть диаграмма, где значения слишком близки, например:

• Значение A -> 3.7747199435
• Значение B -> 3.775531821
• Значение C -> 3.7754975674
• Значение D -> 3,8358619466
• Значение E -> 3,8856710034

и я получаю визуализацию с небольшим различием между точками.

Вот код диаграммы:

 <ResponsiveContainer>
  <AreaChart
    data={data}
    margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
    baseValue={['dataMin', 'auto']}
  >

    <Area
      dataKey="value"
      stroke="#6dffd3"
      strokeWidth={1}
    />
  </AreaChart>
</ResponsiveContainer>
  

Итак, как я могу улучшить визуализацию диаграммы, добившись лучшего контраста значений?

Я использовал компонент yAxis с атрибутом hide.

 <ResponsiveContainer>
  <AreaChart
    data={data}
    margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
  >
    <YAxis domain={['auto', 'auto']} hide />
    <Area dataKey="value" stroke="#6dffd3" strokeWidth={1} />
  </AreaChart>
</ResponsiveContainer>