So the problem is this. My x is not showing(time), I can't see time of the chart or (x), I am getting this error Error: This method is not implemented: either no adapter can be found or an inplete integration was provided. I have tried many things, I have turned the internet upside down, where I have found some blogs about adding ticks to xAxes that would help, but it did not help. Please, someone, help me Chart.js

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const determineTimeFormat = (
  timeFormat: string,
  day: any,
  week: any,
  year: any
) => {
  switch (timeFormat) {
    case "24h":
      return day;
    case "7d":
      return week;
    case "1y":
      return year;
    default:
      return day;
  }
};

interface Props {
  data: any
}

const ChartData: React.FC<Props> = ({ data }) => {
  const chartCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const { day, week, year, detail } = data;
  const [timeFormat, setTimeFormat] = useState("24h");
  const [isRebuildingCanvas, setIsRebuildingCanvas] = useState(false);
  
 

  useEffect(() => {
    setIsRebuildingCanvas(true);
  }, [timeFormat]);

  useEffect(() => {
    if (isRebuildingCanvas) {
      setIsRebuildingCanvas(false);
    }
  }, [isRebuildingCanvas]);

  useEffect(() => {
      if (chartCanvasRef && chartCanvasRef.current && detail) {
    const chartCanvas = chartCanvasRef.current
    if (isRebuildingCanvas || !chartCanvas) {
      return;
    }
  
    const chartInstance = new Chart(chartCanvasRef.current, {
      type: "line",
      data: {
        datasets: [
          {
            label: `${detail.name} price`,
            data: determineTimeFormat(timeFormat, day, week, year),
            backgroundColor: 'rgba(134,159,152, 1)',
            borderColor: "rgba(174, 305, 194, 0.4",
            pointRadius: 0,
          },
        ],
      },

Options

  options: {      
        animation: {
          duration: 2000,
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: 
            {
              type: "time",
            },  
        },
      }
    });
    return () => {
      chartInstance.destroy();
    }
  }}, [day, isRebuildingCanvas,timeFormat, week, year, detail]);

Same ponent

 return (
    <div className='chart__container'>
    {renderPrice()}
      {isRebuildingCanvas ? undefined : (
        <canvas ref={chartCanvasRef} id='myChart'></canvas>
      )}
      <button className='time__format' onClick={() => setTimeFormat("24h")}>24h</button>
      <button className='time__format' onClick={() => setTimeFormat("7d")}>7d</button>
      <button className='time__format'  onClick={() => setTimeFormat("1y")}>1y</button>
    </div>
  );
};

export default ChartData;

So the problem is this. My x is not showing(time), I can't see time of the chart or (x), I am getting this error Error: This method is not implemented: either no adapter can be found or an inplete integration was provided. I have tried many things, I have turned the internet upside down, where I have found some blogs about adding ticks to xAxes that would help, but it did not help. Please, someone, help me Chart.js

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const determineTimeFormat = (
  timeFormat: string,
  day: any,
  week: any,
  year: any
) => {
  switch (timeFormat) {
    case "24h":
      return day;
    case "7d":
      return week;
    case "1y":
      return year;
    default:
      return day;
  }
};

interface Props {
  data: any
}

const ChartData: React.FC<Props> = ({ data }) => {
  const chartCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const { day, week, year, detail } = data;
  const [timeFormat, setTimeFormat] = useState("24h");
  const [isRebuildingCanvas, setIsRebuildingCanvas] = useState(false);
  
 

  useEffect(() => {
    setIsRebuildingCanvas(true);
  }, [timeFormat]);

  useEffect(() => {
    if (isRebuildingCanvas) {
      setIsRebuildingCanvas(false);
    }
  }, [isRebuildingCanvas]);

  useEffect(() => {
      if (chartCanvasRef && chartCanvasRef.current && detail) {
    const chartCanvas = chartCanvasRef.current
    if (isRebuildingCanvas || !chartCanvas) {
      return;
    }
  
    const chartInstance = new Chart(chartCanvasRef.current, {
      type: "line",
      data: {
        datasets: [
          {
            label: `${detail.name} price`,
            data: determineTimeFormat(timeFormat, day, week, year),
            backgroundColor: 'rgba(134,159,152, 1)',
            borderColor: "rgba(174, 305, 194, 0.4",
            pointRadius: 0,
          },
        ],
      },

Options

  options: {      
        animation: {
          duration: 2000,
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: 
            {
              type: "time",
            },  
        },
      }
    });
    return () => {
      chartInstance.destroy();
    }
  }}, [day, isRebuildingCanvas,timeFormat, week, year, detail]);

Same ponent

 return (
    <div className='chart__container'>
    {renderPrice()}
      {isRebuildingCanvas ? undefined : (
        <canvas ref={chartCanvasRef} id='myChart'></canvas>
      )}
      <button className='time__format' onClick={() => setTimeFormat("24h")}>24h</button>
      <button className='time__format' onClick={() => setTimeFormat("7d")}>7d</button>
      <button className='time__format'  onClick={() => setTimeFormat("1y")}>1y</button>
    </div>
  );
};

export default ChartData;

• javascript
• reactjs
• typescript

• which version of char.js are you using? do you have moment.js as dependency? – Priyank Kachhela Commented May 24, 2021 at 13:31
• @PriyankKachhela Chart is v3, I don't have moment js – mura1 Commented May 24, 2021 at 13:43
• chartjs/docs/latest/axes/cartesian/time.html#date-adapters According to this document The time scale requires both a date library and a corresponding adapter to be present – Priyank Kachhela Commented May 24, 2021 at 13:44
• I have installed the adapter(moment), but it did not fixed the problem, is the import good – mura1 Commented May 24, 2021 at 13:53

1 Answer 1

According this document

The time scale requires both a date library and a corresponding adapter to be present

So if you are using npm

npm install moment chartjs-adapter-moment --save-dev

and in your files

import { Chart } from 'chart.js'
import 'chartjs-adapter-moment';

You can use any other adapter described here