diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index 3537b827..7335919e 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@@ -6,8 +6,16 @@ const HorizontalBarChart = ({
seriesData = [],
categories = [],
colors = [
- "#1E90FF", "#00BFFF", "#9370DB", "#6A0DAD", "#A9A9A9",
- "#6A5ACD", "#FFA500", "#FF4500", "#20B2AA", "#708090",
+ "#1E90FF",
+ "#00BFFF",
+ "#9370DB",
+ "#6A0DAD",
+ "#A9A9A9",
+ "#6A5ACD",
+ "#FFA500",
+ "#FF4500",
+ "#20B2AA",
+ "#708090",
],
loading = false,
}) => {
@@ -31,7 +39,6 @@ const HorizontalBarChart = ({
if (!hasValidData) {
return
No data to display
;
}
-
// Combine seriesData and categories, then sort in descending order
const combined = seriesData.map((value, index) => ({
value,
@@ -40,11 +47,13 @@ const HorizontalBarChart = ({
const sorted = combined.sort((a, b) => b.value - a.value);
// Extract sorted values
- const sortedSeriesData = sorted.map(item => item.value);
- const sortedCategories = sorted.map(item => item.label);
+ const sortedSeriesData = sorted.map((item) => item.value);
+ const sortedCategories = sorted.map((item) => item.label);
// Replace 0 with 1 for visual purposes, but display "0%" in labels
- const adjustedSeriesData = sortedSeriesData.map(val => (val === 0 ? 1 : val));
+ const adjustedSeriesData = sortedSeriesData.map((val) =>
+ val === 0 ? 0.1 : val
+ );
// Dynamically adjust chart height if only one data point
const chartHeight = seriesData.length === 1 ? 80 : 380;
@@ -99,14 +108,13 @@ const HorizontalBarChart = ({
axisTicks: { show: false },
},
legend: {
- show: true,
+ show: true,
},
tooltip: {
- theme: "dark",
x: { show: true },
y: {
- title: {
- formatter: () => "",
+ formatter: function (val) {
+ return (val < 1 ? Math.floor(val) : val) + "%";
},
},
},
@@ -116,7 +124,7 @@ const HorizontalBarChart = ({