Recharts

Question

我有一张图表，其中的值太接近了，例如：

值 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>

那么，我怎样才能提高图表的可视化效果，使值具有更好的对比度？

Answer 1

我使用了带有隐藏属性的 YAxis 组件。

<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>

Recharts - 如何改进最接近数字的可视化

Recharts - How to improve the visualization for closest numbers

javascript

reactjs