chart.js 円グラフの外にラベルを表示したい

Question

実現したいこと

上の画像のように、円グラフの外側に00時〜23時までを表すラベルを表示したいです。

現在のコード

import {Pie} from "react-chartjs-2";
import styled from "styled-components";
import { useEffect, useState } from "react";
import axios from "axios";
import ChartDataLabels from 'chartjs-plugin-datalabels';
import "chart.js";
import EditTimeRecord from "../pages/EditTimeRecord";

// styled-components →
const Container = styled.div`
  position: relative;
  width: 330px;
  margin: 30px auto 0 auto;
  @media(min-width: 376px) {
    width: 360px;
  }
  @media(min-width: 600px) {
    width: 440px;
  }
  @media(min-width: 600px) and (min-height: 1000px) {
    width: 570px;
  }
  @media(min-width: 900px) {
    width: 50%;
    max-width: 550px;
    padding: 0;
    margin-top: 0;
    margin-left: 20px;
  }
  @media(min-width: 900px) and (min-height: 1000px) {
    width: 750px;
    max-width: 700px;
    margin: 0 auto;
  }
`;
const EditIcon = styled.i`
  font-size: 30px;
  position: absolute;
  top: 0;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
`;
const NoDataContainer = styled.div`
  position: relative;
  width: 100%;
  &::before {
    padding-top: 100%;
    content: "";
    display: block;
  }
`;
const NoDataTitle = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
`;
// ← styled-components

const TimeChart = (props) => {

  const [chartData, setChartData] = useState([]);
  const [db, setDb] = useState(true);
  const changeDb = () => {
    setDb(!db);
  }

  let dateString = `${props.nowDay.getFullYear()},${props.nowDay.getMonth()+1},${props.nowDay.getDate()}`

  useEffect(() => {
    axios.get(`http://localhost:3001/timeLog/timeChart/${dateString}`,
      {
        headers: {accessToken: localStorage.getItem("accessToken")}
      }
    ).then((res) => {
      const tmp = [];
      res.data.forEach((data) => {
        const startTimeData = data.start_time.split(",");
        const startTime = new Date(startTimeData[0], startTimeData[1]-1, startTimeData[2], startTimeData[3], startTimeData[4]);
        const finishTimeData = data.finish_time.split(",");
        const finishTime = new Date(finishTimeData[0], finishTimeData[1]-1, finishTimeData[2],finishTimeData[3], finishTimeData[4]);
        data.start_time = startTime;
        data.finish_time = finishTime;
        if (finishTime - startTime > 0) tmp.push(data);
      });
      setChartData(tmp);
    });
  }, [dateString, db, props.isDoing]);

  if (chartData.length !== 0) {
    chartData.sort((a, b) => a.start_time - b.start_time);

    // アクションの開始日と終了日が異なっているときの処理 →
    if (
      chartData[0].start_time.getDate() !== chartData[0].finish_time.getDate()
    ) {
      let tmp = chartData;
      const newDate = chartData[0].start_time.getDate()+1;
      tmp[0].start_time = new Date(chartData[0].start_time.getFullYear(), chartData[0].start_time.getMonth(), newDate);
      setChartData(tmp);
    }
    if (
      chartData[chartData.length-1].start_time.getDate() !== chartData[chartData.length-1].finish_time.getDate()
    ) {
      let tmp = chartData;
      const newDate = chartData[chartData.length-1].finish_time.getDate()-1;
      tmp[chartData.length-1].finish_time = new Date(chartData[chartData.length-1].finish_time.getFullYear(), chartData[chartData.length-1].finish_time.getMonth(), newDate, 23, 59);
      setChartData(tmp);
    }
    // ← アクションの開始日と終了日が異なっているときの処理

    const makeFree = (start_time, finish_time) => {
      return {
        id: 'free',
        item_name: "空き時間",
        start_time: start_time,
        finish_time: finish_time,
        color: '#d5d5d5'
      }
    }
    const ts = chartData[0].start_time;
    if (ts - new Date(ts.getFullYear(), ts.getMonth(), ts.getDate()) > 0) {
      const free = makeFree(new Date(ts.getFullYear(), ts.getMonth(), ts.getDate()), ts);
      setChartData([...chartData, free]);
    }

    const tf = chartData[chartData.length -1].finish_time;
    if (new Date(tf.getFullYear(), tf.getMonth(), tf.getDate(), 23, 59) - tf > 4*6000) {
      const free = makeFree(tf, new Date(tf.getFullYear(), tf.getMonth(), tf.getDate(), 23, 59));
      setChartData([...chartData, free]);
    }

    for (let i = 0; i < chartData.length-1; i++) {
      const timeLog = chartData[i+1].start_time - chartData[i].finish_time;
      if (timeLog > 4) {
        const free = makeFree(chartData[i].finish_time, chartData[i+1].start_time);
        setChartData([...chartData, free]);
      }
    }
  }

  const times = [];
  const labels = [];
  const backgroundColors = [];
  chartData.forEach((data) => {
    let time = (data.finish_time - data.start_time) / (60 * 1000);
    if (chartData[chartData.length-1] === data) time += 1;
    times.push(time);
    labels.push(data.item_name);
    backgroundColors.push(data.color);
  });

  const data = {
    labels: labels,
    datasets: [{
      data: times,
      backgroundColor: backgroundColors,
      borderWidth: 0,
      //borderColor: '#fff',
      datalabels: {
        labels: {
          data: {
            align: 'start',
            formatter: (value, context) => {
              const label = context.chart.data.labels[context.dataIndex];
              let hour = ~~(value / 60);
              const tmp = hour * 60;
              let minutes = value - tmp;
              hour = ("0" + hour).slice(-2);
              minutes = ("0" + minutes).slice(-2);
              if (label === "空き時間") return null;
              return `${label}\n${hour}:${minutes}`;
            },
          },
        }
      }
    }]
  }

  const options = {
    plugins: {
      datalabels: {
        color: '#0d0d0d',
        anchor: 'end',
        font: {
          size: 10,
        },
        clamp: true,
      },
      legend: {
        display: false
      },
    },
  }

  const [isEditRecord, setIsEditRecord] = useState(false);
  const changeIsEditRecord = (boolean) => {
    setIsEditRecord(boolean);
  }

  return (
    <Container>
      {
        !isEditRecord ? (
          times.length !== 0 ? (
            <>
              <Pie
                data={data}
                plugins={[ChartDataLabels]}
                options={options}
              />
              <EditIcon className="fas fa-edit" onClick={() => setIsEditRecord(true)}></EditIcon>
            </>
          ) : (
            <NoDataContainer>
              <NoDataTitle>データがありません</NoDataTitle>
            </NoDataContainer>
          )
        ) : (
          <EditTimeRecord
            chartData={chartData}
            nowDay={props.nowDay}
            changeIsEditRecord={changeIsEditRecord}
            changeDb={changeDb}
          />
        )
      }
    </Container>
  );

}

export default TimeChart;