next chart.js how to change date display - reactjs

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!:)

Answer 1

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: