updated donut chart

app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Line } from "react-chartjs-2";
+import { Doughnut } from "react-chartjs-2";
 import io from "socket.io-client";
 
 import axios from "axios";
@@ -16,7 +16,7 @@ interface ChartComponentProps {
   fontWeight?: "Light" | "Regular" | "Bold";
 }
 
-const LineGraphComponent = ({
+const DoughnutGraphComponent = ({
   id,
   type,
   title,
@@ -52,7 +52,7 @@ const LineGraphComponent = ({
   };
 
   useEffect(() => {
-  
+   
   },[])
 
   // Memoize Theme Colors
@@ -97,11 +97,11 @@ const LineGraphComponent = ({
           },
         },
         scales: {
-          x: {
-            ticks: {
-              display: true, // This hides the x-axis labels
-            },
-          },
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
         },
       }),
       [title, chartFontStyle, name]
@@ -161,8 +161,6 @@ const LineGraphComponent = ({
       try {
         const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
         if (response.status === 200) {
-          console.log('line chart res',response);
-          
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)
           setName(response.data.widgetName)
@@ -186,7 +184,7 @@ const LineGraphComponent = ({
   }
   ,[chartMeasurements, chartDuration, widgetName])
 
-  return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+  return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
-export default LineGraphComponent;
+export default DoughnutGraphComponent;