Recharts не будет автоматически рассчитывать тики YAxis - PullRequest
Новая
       37

Recharts не будет автоматически рассчитывать тики YAxis

1 голос
/ 08 января 2020

Я пытаюсь добавить график, используя recharts с последними курсами обмена некоторых валют. Данные отображаются правильно, но график всегда начинается с 0 и идет чуть выше максимального значения.

Диаграмма правильная, однако начинать ее с нуля не нужно, поскольку при этом почти линия.

Вот изображение диаграммы:

enter image description here

Мне бы хотелось, чтобы recharts мог рассчитывать автоматически тики, поэтому он будет начинаться немного ниже минимального значения из данных и заканчиваться чуть выше максимального значения.

Вот мой код: 

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>
    );
}

Как мне этого добиться? Я попытался возиться с interval и ticks реквизитом под <YAxis>, но не смог заставить его работать.

Заранее спасибо

1 Ответ

3 голосов
/ 08 января 2020

Используйте yAxis domain prop: 

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