I'm trying to add a chart using recharts with the latest exchange rates of some currencies. Data is shown correctly, but the chart always starts at 0 and goes to a bit above the max value.

The chart is correct, however it doesn't need to start at 0, because doing this, it is almost a line.

Here is the picture of the chart:

I'd like that recharts could calculate automatically the ticks, so it would begin a little bit below the minimum value from the data and finish a little bit above the maximum value.

Here is my code:

import React, { useEffect, useState } from "react";
import { StyledCurrencyChart } from "./styles";
import {
    AreaChart,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Area,
    ResponsiveContainer
} from "recharts";
import useExchangeRateProvider from "../../hooks/useExchangeRateProvider";
import api from "../../services/api";
import theme from "../../styles/customMuiTheme";
import moment from "moment";

function Chart({ data }) {
    return (
        <ResponsiveContainer width="100%" height={200}>
            <AreaChart
                width="100%"
                height={250}
                data={data}
                margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
            >
                <defs>
                    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop
                            offset="5%"
                            stopColor={theme.palette.secondary.main}
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor={theme.palette.secondary.main}
                            stopOpacity={0}
                        />
                    </linearGradient>
                </defs>
                <XAxis
                    dataKey="date"
                    tickFormatter={formatDate}
                    style={{ fill: "#ffffff" }}
                />
                <YAxis tickFormatter={formatRate} style={{ fill: "#ffffff" }} />
                <CartesianGrid
                    strokeDasharray="3 3"
                    fill="rgba(255, 255, 255, 0.3)"
                />
                <Tooltip />
                <Area
                    type="monotone"
                    dataKey="rate"
                    stroke={theme.palette.secondary.main}
                    fillOpacity={1}
                    fill="url(#colorUv)"
                />
            </AreaChart>
        </ResponsiveContainer>
    );
}

// function to format date
function formatDate(tickItem) {
    return moment(tickItem).format("MMM Do YY");
}

// function to format rate
function formatRate(tickItem) {
    return parseFloat(tickItem).toLocaleString("en-US");
}

export default function CurrencyChart() {
    // selected country
    const exchangeRateProvider = useExchangeRateProvider();
    const country = exchangeRateProvider.state.exchangeRateProvider.country;

    // state
    const [values, setValues] = useState({
        loading: true,
        error: false,
        data: {}
    });

    // update chart on country change
    useEffect(() => {
        async function updateChart() {
            try {
                const { data } = await api.get(
                    `/public/rates/history/${country}`
                );
                setValues({ loading: false, error: false, data });
            } catch (e) {
                setValues({ loading: false, error: true, data: {} });
            }
        }
        updateChart();
    }, [country]);

    return (
        <StyledCurrencyChart>
            <Chart data={values.data} />
        </StyledCurrencyChart>
    );
}

How can I achieve it? I tried messing around with interval and ticks props under the <YAxis>, but I couldn't make it work.

Thanks in advance

I'm trying to add a chart using recharts with the latest exchange rates of some currencies. Data is shown correctly, but the chart always starts at 0 and goes to a bit above the max value.

The chart is correct, however it doesn't need to start at 0, because doing this, it is almost a line.

Here is the picture of the chart:

I'd like that recharts could calculate automatically the ticks, so it would begin a little bit below the minimum value from the data and finish a little bit above the maximum value.

Here is my code:

import React, { useEffect, useState } from "react";
import { StyledCurrencyChart } from "./styles";
import {
    AreaChart,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Area,
    ResponsiveContainer
} from "recharts";
import useExchangeRateProvider from "../../hooks/useExchangeRateProvider";
import api from "../../services/api";
import theme from "../../styles/customMuiTheme";
import moment from "moment";

function Chart({ data }) {
    return (
        <ResponsiveContainer width="100%" height={200}>
            <AreaChart
                width="100%"
                height={250}
                data={data}
                margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
            >
                <defs>
                    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop
                            offset="5%"
                            stopColor={theme.palette.secondary.main}
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor={theme.palette.secondary.main}
                            stopOpacity={0}
                        />
                    </linearGradient>
                </defs>
                <XAxis
                    dataKey="date"
                    tickFormatter={formatDate}
                    style={{ fill: "#ffffff" }}
                />
                <YAxis tickFormatter={formatRate} style={{ fill: "#ffffff" }} />
                <CartesianGrid
                    strokeDasharray="3 3"
                    fill="rgba(255, 255, 255, 0.3)"
                />
                <Tooltip />
                <Area
                    type="monotone"
                    dataKey="rate"
                    stroke={theme.palette.secondary.main}
                    fillOpacity={1}
                    fill="url(#colorUv)"
                />
            </AreaChart>
        </ResponsiveContainer>
    );
}

// function to format date
function formatDate(tickItem) {
    return moment(tickItem).format("MMM Do YY");
}

// function to format rate
function formatRate(tickItem) {
    return parseFloat(tickItem).toLocaleString("en-US");
}

export default function CurrencyChart() {
    // selected country
    const exchangeRateProvider = useExchangeRateProvider();
    const country = exchangeRateProvider.state.exchangeRateProvider.country;

    // state
    const [values, setValues] = useState({
        loading: true,
        error: false,
        data: {}
    });

    // update chart on country change
    useEffect(() => {
        async function updateChart() {
            try {
                const { data } = await api.get(
                    `/public/rates/history/${country}`
                );
                setValues({ loading: false, error: false, data });
            } catch (e) {
                setValues({ loading: false, error: true, data: {} });
            }
        }
        updateChart();
    }, [country]);

    return (
        <StyledCurrencyChart>
            <Chart data={values.data} />
        </StyledCurrencyChart>
    );
}

How can I achieve it? I tried messing around with interval and ticks props under the <YAxis>, but I couldn't make it work.

Thanks in advance

• javascript
• reactjs
• recharts

2 Answers 2

Use the yAxis domain prop:

<YAxis type="number" domain={[0, 1000]}/> // set to whatever you want [yMix, yMax]

For calculating automatically you can use something like these

<YAxis type="number" domain={['dataMin', 'dataMax']} />
<YAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="number" domain={['auto', 'auto']} />

Please make sure to use integer numbers for the values, If you use a string as a value for YAxis it can not recognize the max value correctly.