Chartjs-Chart js – date scale last 30 days vs 30 days prior

I think you could use the timeseries scale for your purpose instead of the linear one. You are already using date-fns therefore it could be easier.

You should add the dependecncy with date adapter for date-fns: chartjs-adapter-date-fns

Here is the updated code and below the picture:

import "./styles.css";
import { useCallback } from "react";
import { format, eachDayOfInterval, subDays } from "date-fns";
import "chartjs-adapter-date-fns";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  TimeSeriesScale,
  Title,
  Tooltip,
  Legend,
  ChartOptions,
  PointElement,
  LineElement,
  ChartData
} from "chart.js";
import { Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  TimeSeriesScale,
  Title,
  Tooltip,
  Legend
);

export default function App() {
  const data = {
    CURRENT: [
      {
        views: 5114,
        date: 24,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 3755,
        date: 25,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 10789,
        date: 26,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 4920,
        date: 27,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 5537,
        date: 28,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 4194,
        date: 29,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 3720,
        date: 30,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 3429,
        date: 31,
        month: 12,
        value: "CURRENT"
      },
      {
        views: 4762,
        date: 1,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 6902,
        date: 2,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 4577,
        date: 3,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 2975,
        date: 4,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 2735,
        date: 5,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 3065,
        date: 6,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 3242,
        date: 7,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 2659,
        date: 8,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 4990,
        date: 9,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 4882,
        date: 10,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 5299,
        date: 11,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 3934,
        date: 12,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 2287,
        date: 13,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 2126,
        date: 14,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 3641,
        date: 15,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 6027,
        date: 16,
        month: 1,
        value: "CURRENT"
      },
      {
        views: 2698,
        date: 17,
        month: 1,
        value: "CURRENT"
      }
    ],
    PREVIOUS: [
      {
        views: 4411,
        date: 15,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 12,
        date: 16,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 8,
        date: 17,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 6,
        date: 18,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 1,
        date: 19,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 2399,
        date: 20,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 8943,
        date: 21,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 6037,
        date: 22,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 3897,
        date: 23,
        month: 12,
        value: "PREVIOUS"
      },
      {
        views: 4858,
        date: 24,
        month: 12,
        value: "PREVIOUS"
      }
    ]
  };
  const currentYear = new Date().getFullYear();
  const currentMonth = data.CURRENT[data.CURRENT.length-1].month;

  const formatter = (data) => {
    const result = [];
    for (const item of data) {
      const year = item.month > currentMonth ? currentYear -1 : currentYear; 
      const date = new Date(year, item.month, item.date);
      result.push({
        y: item.views,
        x: date
      });
    }
    return result;
  };

  const chart = {
    datasets: Object.keys(data).map((key, index) => ({
      label: key,
      data: formatter(data[key]),
      backgroundColor: index === 0 ? "red" : "blue",
      borderColor: index === 0 ? "red" : "blue"
    }))
  };

  const options ={
    scales: {
      x: {
        type: 'timeseries',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'dd'
          }
        }
      }
    }
  };
  return <Line options={options} data={chart} />;
}