diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.stories.tsx b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.stories.tsx
new file mode 100644
index 00000000..14d3a236
--- /dev/null
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { HbarChart, Entry } from './HbarChart'
+
+const meta = {
+  title: 'Components/MapLayers/HbarChart',
+  component: HbarChart,
+  tags: ['map', 'tooltip', 'autodocs'],
+} satisfies Meta<typeof HbarChart>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const operatorsPT: Entry[] = [
+  {
+    name: 'כפיר',
+    total: 1883,
+    actual: 0,
+    color: '#5840c0',
+  },
+  {
+    name: 'Unknown',
+    total: 2318,
+    actual: 0,
+    color: '#2a443e',
+  },
+  {
+    name: 'כרמלית',
+    total: 998,
+    actual: 0,
+    color: '#5cbcec',
+  },
+  {
+    name: 'כבל אקספרס',
+    total: 12824,
+    actual: 0,
+    color: '#0d2b58',
+  },
+  {
+    name: 'מועצה אזורית גולן',
+    total: 1992,
+    actual: 1506,
+    color: '#957476',
+  },
+]
+
+export const Chart: Story = {
+  args: {
+    entries: operatorsPT,
+    complement: false,
+  },
+}
diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
index 54e71a35..b283a22f 100644
--- a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
@@ -3,7 +3,7 @@ import { TEXTS } from 'src/resources/texts'
 import './HbarChart.scss'
 import { Tooltip } from '@mui/material'
 
-type Entry = { name: string; total: number; actual: number; color?: string }
+export type Entry = { name: string; total: number; actual: number; color?: string }
 const numberFormatter = new Intl.NumberFormat('he-IL')
 
 export function HbarChart({