I don't believe this code should display a chart with decimal values in the y-axis ticks, but it does.
import React from "react";
import {
LineChart,
Line,
CartesianGrid,
XAxis,
YAxis,
ResponsiveContainer,
Tooltip,
Legend,
} from "recharts";
import "./line-rechart.styles.scss";
const RenderLineChart = ({ chartData }) => {
console.log(chartData);
return (
<ResponsiveContainer
width="100%"
height="100%"
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<LineChart width={600} height={300} data={chartData}>
<Line type="monotone" dataKey="close" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" />
<YAxis
type="number"
domain={["dataMin", "dataMax"]}
allowDecimals={false}
scale="auto"
/>
<XAxis dataKey="date" />
<Legend />
<Tooltip />
</LineChart>
</ResponsiveContainer>
);
};
export default RenderLineChart;
I read that there may be a bug with recharts: https://github.com/recharts/recharts/issues/777
And if there is a bug, how can I implement a workaround to remove decimals?
I've read good things about Recharts, but would other chart libraries be just as simple yet powerful? I really like that I can just pass in an API's JSON array of objects, which is what chartData contains:
