Load chart rotated, percent values rounded

src/components/charts/Disks.tsx

@@ -23,6 +23,9 @@ function Disks({ disks }: DisksProps) {
   const theme = useTheme();
 
   const formatYAxis = (value: number) => {
+    return value.toString();
+  };
+  const formatXAxis = (value: string) => {
     return value + '%';
   };
 
@@ -40,12 +43,10 @@ function Disks({ disks }: DisksProps) {
           },
           plotOptions: {
             bar: {
-              borderRadius: 8,
-              columnWidth: '60%',
+              borderRadius: 4,
+              horizontal: true,
+              barHeight: '60%',
               distributed: true,
-              dataLabels: {
-                orientation: "vertical",
-              },
             },
           },
           dataLabels: {
@@ -64,30 +65,22 @@ function Disks({ disks }: DisksProps) {
                 colors: theme.palette.text.primary,
               },
             },
-            tickAmount: 4,
-            max: 100,
-            min: 0,
           },
           xaxis: {
             axisBorder: {
               show: false
             },
-            axisTicks: {
-              show: false
-            },
             labels: {
               rotate: 0,
-              hideOverlappingLabels: true,
-              trim: true,
               style: {
                 colors: theme.palette.text.primary,
-                fontSize: '10px',
-                fontFamily: 'Helvetica, Arial, sans-serif',
-                fontWeight: 400,
-                cssClass: 'apexcharts-xaxis-label',
               },
+              formatter: formatXAxis,
             },
-            categories: disks.map(d => d.mountpoint)
+            categories: disks.map(d => d.mountpoint),
+            tickAmount: 4,
+            max: 100,
+            min: 0,
           },
           tooltip: {
             y: {
@@ -107,6 +100,8 @@ function Disks({ disks }: DisksProps) {
         }]}
         type="bar"
         height={200}
+        width="95%"
+        align="right"
       />
     </div>
   );

src/components/charts/Load.tsx

@@ -1,14 +1,11 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
+// SPDX-License-Identifier: AGPL-3.0-or-later 
 // SPDX-FileCopyrightText: 2020-2026 grommunio GmbH
-
 import React, { useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { Paper, Theme, Typography, useTheme } from '@mui/material';
 import Chart from "react-apexcharts";
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '../../store';
-
-
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     flex: 1,
@@ -22,20 +19,22 @@ const useStyles = makeStyles()((theme: Theme) => ({
     display: 'flex',
   },
 }));
-
-
 function Load() {
   const { classes } = useStyles();
   const { t } = useTranslation();
   const { load } = useAppSelector(state => state.dashboard);
   const theme = useTheme();
-
-  const formatYAxis = useCallback((value: number) => {
-    if(value === 0) return '0%';
-    if(value < 0.1) return value.toFixed(2) + '%';
+  const formatValue = useCallback((value: number) => {
     return value.toFixed(1) + '%';
   }, []);
 
+  const formatXAxis = useCallback((value: string) => {
+    return value + '%';
+  //formatValue(Number(value));
+  }, [formatValue]);
+  const formatTotalLabel = useCallback((value?: string) => {
+    return formatValue(Number(value));
+  }, [formatValue]);
   return (
     <Paper className={classes.paper}>
       <div className={classes.root}>
@@ -51,54 +50,52 @@ function Load() {
             },
             plotOptions: {
               bar: {
-                borderRadius: 8,
-                columnWidth: '60%',
+                borderRadius: 4,
+                horizontal: true,
+                barHeight: '60%',
                 distributed: true,
                 dataLabels: {
                   total: {
-                    formatter: (v) => v + "%",
+                    formatter: formatTotalLabel,
                   },
-                  orientation: "vertical",
                 },
               }
             },
             dataLabels: {
-              formatter: (v) => v + "%",
+              formatter: formatValue,
             },
             legend: {
-              labels: {
-                colors: theme.palette.text.primary,
-              },
+              show: false,
             },
             xaxis: {
+              axisBorder: {
+                show: false
+              },
               labels: {
-                rotate: 0,
                 style: {
                   colors: theme.palette.text.primary,
                 },
+                formatter: formatXAxis,
               },
               categories: [t("1 Min"), t("5 Mins"), t("15 Mins")],
-            },
-            tooltip: {
-              y: {
-                formatter: function(value) {
-                  return value + '%';
-                },
-                title: {
-                  formatter: () => "",
-                }
-              },
+              tickAmount: 4,
+              max: 100,
+              min: 0,
             },
             yaxis: {
               labels: {
                 style: {
                   colors: theme.palette.text.primary,
                 },
-                formatter: formatYAxis,
               },
-              tickAmount: 4,
-              max: 100,
-              min: 0,
+            },
+            tooltip: {
+              y: {
+                formatter: formatValue,
+                title: {
+                  formatter: () => "",
+                }
+              },
             },
             colors: ['#2E93fA', '#546E7A', '#E91E63', '#FF9800', '#8e9eab', '#66DA26'],
           }}
@@ -107,11 +104,11 @@ function Load() {
           }]}
           type="bar"
           height={200}
+          width="95%"
+          align="right"
         />
       </div>
     </Paper>
   );
 }
-
-
 export default Load;