next chart.js how to change date display

Question

how to change date display on my chart? Here below my chart:

How to change date displaying way? Is there any way to display it horizontaly and f.e. not every date, but every third?

Here below my code:



import { ChartProps } from "./Chart.props";
import styles from "./Chart.module.css";
import React, { useState, useEffect, useRef } from 'react';
import { Button } from "../Button/Button";
import { options } from "./ChartConfig.js";
import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend, ScriptableContext, } from "chart.js";
import { Chart as ReactChart, Line } from "react-chartjs-2";

import coinGecko from "../../../apis/coinGecko";

ChartJS.register(ArcElement, Tooltip, Filler, Legend, CategoryScale, LinearScale, PointElement, LineElement);


export const CoinPriceChart = (props) => {


    const [timeFormat, setTimeFormat] = useState("30d");
    const [interval, setInterval] = useState("hourly");

    const [coinPrice, setCoinPrice] = useState([]);
    const [coinHistory, setCoinHistory] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const x = [];
    const y = [];


    const determineTimeFormat = () => {
        switch (timeFormat) {
          case "1":
            setInterval("5min");
            setTimeFormat("1");
          case "7":
            setInterval("hourly");
            setTimeFormat("7");
          case "30":
            setInterval("daily");
            setTimeFormat("30");
          default:
            setInterval("hourly");
        }
      };


    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            await fetch(`https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=${timeFormat}&interval=${interval}`)

                .then((response) => {
                    return response.json();

                })
                .then((data) => {
                    for (let i = 0; i < data.prices.length; i++) {
                        x.push(data.prices[i][1])
                        setCoinPrice(x)
                    }

                    for (let i = 0; i < data.prices.length; i++) {
                        y.push(new Date(data.prices[i][0]).toLocaleDateString("en-GB"))
                        setCoinHistory(y)
                    }

                })
            setIsLoading(false);
        };

        fetchData();
    }, [timeFormat]);


    

    const chart = {
        labels: coinHistory,
        datasets: [
            {
                data: coinPrice,

                pointRadius: 0,
                pointHoverRadius: 2,
                backgroundColor: (context: ScriptableContext<"line">) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 330);
                    gradient.addColorStop(0, "rgba(91,56,237,0.45)");
                    gradient.addColorStop(1, "rgba(91,56,237,0.0)");
                    return gradient;
                },
                borderColor: "rgba(91,56,237,255)",
                fill: true,


            }
        ],
        options: {
            ...options
        },
    };
    console.log(timeFormat)

    return (
        <div
            className={styles.Chart}
            {...props}
        >
            <Line id="myChart" data={chart} options={options} />

            <div className="chart-button mt-1">
                <Button
                    onClick={() => setTimeFormat("1")}
                    appearance={"primary"}                >
                    24h
                </Button>
                <Button
                    onClick={() => setTimeFormat("7")}
                    appearance={"primary"}
                >
                    7d
                </Button>
                <Button
                    onClick={() => setTimeFormat("30")}
                    appearance={"primary"}
                >
                    30d
                </Button>
            </div>
        </div>
    );
};

I've been searching for it on a doc., but I haven't found this info. And here below my options code:


export const options = {
    plugins: {

        // show legends for our graph
        legend: {
            display: false,
        },
        
    },
    lineHeightAnnotation: {
        always: true,
        lineWeight: 3,
    },

    //   animate in
    animation: {
        duration: 1,
    },


    //   show the x and y scales
    scales: {
        x: {
            display: true,
        },
        y: { display: true },
    },
    time: {
        useUTC: true
      },
      xAxis: {
        type: 'datetime'
    },
};

Thanks in advance!:)

score 0 · Answer 1 · answered Jul 02 '22 at 09:40

Okay here it is my ChartConfig.js


export const options = {
    plugins: {

        // show legends for our graph
        legend: {
            display: false,
        },

    },
    lineHeightAnnotation: {
        always: true,
        lineWeight: 3,
    },

    //   animate in
    animation: {
        duration: 1,
    },


    //   show the x and y scales
    scales: {
        x: {
            display: true,
            ticks: {
                maxRotation: 0, // this line to make labels horizontal
                maxTicksLimit: 5, // this is num of labels limit

            }
        },
        y: {
            display: true
        },
        xAxes: [{
            ticks: {
                maxRotation: 90
            }
        }]


    },
    time: {
        useUTC: true
    },
};

And as a result:

next chart.js how to change date display

1 Answers1