JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

HTML

<canvas id="LineChart" height="100"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"
    integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

JavaScript

var ctx=document.getElementById( 'LineChart' ).getContext( "2d" );

let dataObj = {
  "Centre": "medlife",
  "WorkOrderID": "",
  "LabNo": "MED001.133324",
  "PanelID": "135",
  "PanelName": "PHARMEASY-BANGLORE",
  "PName": "DUMMI",
  "Gender": "Male",
  "Age": "46 Y 0 M 0 D ",
  "ReferredBy": "Self",
  "results": [{
    "Package_name": "GLUCOSE, FASTING",
    "Package_book_code": "BIO101",
    "investigation": [{
      "test_name": "GLUCOSE, FASTING",
      "test_code": "BIO101",
      "barcodeNo": "F12340",
      "SampleType": "NAF PLASMA",
      "SampleCollDate": "14-07-2021 11:07:00",
      "SampleRcvDate": "14-07-2021 18:07:09",
      "ApprovalDate": "14-07-2021 18:07:28",
      "SampleCollBy": "ITDOSE TEAM",
      "SampleRcvBy": "ITDOSE TEAM",
      "ApprovedByDoctorID": "2260",
      "IsNabl": "0",
      "observations": [{
        "name": "GLUCOSE, FASTING",
        "observation_time": "2021-10-14",
        "id": "7",
        "value": "320",
        "MinValue": "300",
        "MaxValue": "600",
        "unit": "mg/dL",
        "method": "GOD - POD",
        "impression": "High",
        "pastObservation": [{
            "value": "600",
            "observation_time": "2021-08-12"
          },
          {
            "value": "800",
            "observation_time": "2021-09-13"
          },
          {
            "value": "90",
            "observation_time": "2021-09-01"
          },
          {
            "value": "770",
            "observation_time": "2021-10-15"
          }
          // {
          //     "value": "40",
          //     "observation_time": "2021-08-12T12:00:18.545Z"
          // },
          // {
          //     "value": "80",
          //     "observation_time": "2021-08-13T12:00:18.545Z"
          // },
          // {
          //     "value": "30",
          //     "observation_time": "2021-08-11T12:00:18.545Z"
          // },
          // {
          //     "value": "37",
          //     "observation_time":...