asb_cloud_front/src/components/charts/ChartSaubDataOnline.jsx

import { Chart, TimeScale, Legend, LineController, LineElement, PointElement } from 'chart.js'
import 'chartjs-adapter-date-fns';
import React, { useEffect, useRef} from 'react';

Chart.register( TimeScale, 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',
        },
      },
    },
  },
}

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'}],
      boderColor: 'rgba(0, 99, 132, 1)',
      backgroundColor: 'rgba(0, 99, 132, 1)',
    },
    {
      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'}],
      boderColor: 'rgba(255, 99, 132, 1)',
      backgroundColor: 'rgba(255, 99, 132, 1)',      
      borderDash: [5, 5],
    }
  ]
}

export function ChartSaubDataOnline(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} />)
}