Chart.js x축 값에 따라 다양하게 설정하기 dynamic Tick Color

const xAxisTickColor = (c: any) => {
    switch (getDow(date[c.index])) {
      case "일":
        return "#FF0000";
      case "토":
        return "#000080";
      default:
        return theme.colors.gray6e;
    }
  };

const options = {
    scales: {
      xAxes: {
        ticks: {
          autoSkip: false,
          labelOffset: 4,
          padding: 4,
          font: {
            size: 16,
          },
          color: xAxisTickColor,
        },
        grid: {
          display: false, //뒷배경 라인 없애기
        },
      },
      x: {
        display: false, //하단 라인을 없애기
        ticks: {
          display: false, //새로운tick을 만들었으니 기존의 tick을 제거
        },
      },
    }
  };

// yyyymmdd -> 월
export const getDow = (dt: string | number) => {
  const dow = ["일", "월", "화", "수", "목", "금", "토"];
  const [yyyy, mm, dd] = [
    Number(String(dt).substr(0, 4)),
    Number(String(dt).substr(4, 2)),
    Number(String(dt).substr(6, 2)),
  ];
  const date = new Date(yyyy, mm - 1, dd);
  return dow[date.getDay()];
};