Как сделать график chart.js на 7 дней со всеми изменениями за каждый день?

Question

[Nik_1011]

Здравствуйте.

Делаю график подобный этому. Вопрос в том, что если я подставляю данные с датами из массива API, то получается следующий результат.


Если фильтрую все одинаковые значения дат,как в примере ниже с uniq, то получается только 7 точек на графике, что логично.


Как сделать так, чтобы было как на том примере с coinstats.app(7 дат и множество точек с изменениями)?

Вот код:

const HistoryChart = () => {
  const params = useParams();
  const [chartData, setChartData] = React.useState([]);

  const coinChartData = chartData.prices?.map((value) => ({ x: value[0], y: value[1].toFixed(2) }));
  const labelName = params.coinId[0].toUpperCase() + params.coinId.slice(1);
  const url = `${process.env.REACT_APP_API_COINS_URL}/${params.coinId}/market_chart?vs_currency=usd&days=7`;

  React.useEffect(() => {
    axios
      .get(url)
      .then((response) => {
        setChartData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const uniq = [...new Set(coinChartData?.map((value) => moment(value.x).format('MMMDD')))];

const options = {
    responsive: true,
  };

  const data = {
    labels: uniq,
    datasets: [
      {
        fill: true,
        label: labelName,
        data: coinChartData?.map((value) => value.y),
        borderColor: '#ff9332',
      },
    ],
  };

  return (
    <>
      <Line options={options} data={data} />
    </>
  );
};

export default HistoryChart;