AreaChart.js

<AreaChart data={dataArr} height={250} width={700}>
  <XAxis dataKey={"date"} />
  <YAxis orientation={"left"} />
  <Tooltip
    contentStyle={styles.tooltipWrapper}
    labelStyle={styles.tooltip}
    formatter={value => `$${round(value, 2)}`}
  />
  <Area
    type="linear"
    dataKey="CoinAmount"
    stroke="none"
    fillOpacity={0.4}
    fill="#55efc4"
    activeDot={{ strokeWidth: 0 }}
  />
  <Area
    type="linear"
    dataKey="Total"
    stroke="none"
    fillOpacity={0.6}
    fill="#f7931a"
    activeDot={{ strokeWidth: 0 }}
  />
  <Area
    type="linear"
    dataKey="TotalInvested"
    stroke="none"
    fillOpacity={0.6}
    fill="#3498db"
    activeDot={{ strokeWidth: 0 }}
  />
  <Area
    type="linear"
    dataKey="CoinPrice"
    stroke="none"
    fillOpacity={0.6}
    fill="#e84393"
    activeDot={{ strokeWidth: 0 }}
  />
</AreaChart>