Why is my chart still displaying decimals for the y-axis ticks?

Viewed 831

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:

enter image description here

0 Answers
Related