asb_cloud_front/src/components/charts/ChartTime.js

import React, { useEffect, useRef} from 'react';

import { Chart, TimeScale, LinearScale, Legend, LineController, PointElement, LineElement } from 'chart.js'
//import Chart from 'chart.js/auto';
import 'chartjs-adapter-date-fns';
Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );

const options = {
  //showLine :true,
  //indexAxis:'y',
  //maintainAspectRatio: false,
  //responsive:false,
  scales: {
    y:{
      type: 'time',
      time: {
        unit: 'second',
        displayFormats: {
          millisecond: 'HH:mm:ss.SSS',
          second: 'HH:mm:ss',
          minute: 'HH:mm:ss',
          hour: 'dd HH:mm:ss',
          day: 'MM.dd HH:mm',
          week: 'yy.MM.dd HH:mm',
          month: 'yyyy.MM.dd',
          quarter: 'yyyy.MM.dd',
          year: 'yyyy.MM',
        },
      },
    },
    
    x:{
      type:'linear'
      }
  },
}

const data= {
  datasets: [{
      label: 'Torque',
      data: [
        {x: 10, y: '2021-04-09T17:50:34.021679+05:00'}, 
        {x: 15, y: '2021-04-09T17:50:33.021679+05:00'}, 
        {x: 20, y: '2021-04-09T17:50:32.021679+05:00'}],
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
    },
    {
      label: 'Pressure',
      data: [
        {x: 11, y: '2021-04-09T17:50:34.021679+05:00'}, 
        {x: 14, y: '2021-04-09T17:50:33.021679+05:00'}, 
        {x: 21, y: '2021-04-09T17:50:32.021679+05:00'}],
        
        borderColor: 'rgba(0, 99, 132, 0.5)',

    }
  ]
}

// export type LineConfig = {
//   login?: string | null;
//   password?: string | null;
// }

export function ChartTime(/*props*/){
  const chartRef = useRef(null)
  
  useEffect(()=>{
    let chart = new Chart(chartRef.current, {
      type: 'line',
      data,
      options})
    //chart.canvas.parentNode.style.height = '128px';
    return () => chart.destroy()
  },[])

  return(<canvas ref={chartRef} />)
}