Merge pull request #551 from knowit/549-graph-ticks

#549 - added responsive ticks to the bottom of customer billing graph
knowit · Jan 19, 2024 · 7610c62 · 7610c62
2 parents 16018b9 + 4923a79
commit 7610c62
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/apps/web/src/components/charts/nivo/LineChart.tsx b/apps/web/src/components/charts/nivo/LineChart.tsx
@@ -17,6 +17,18 @@ const LineChart: React.FC<LineSvgProps & IsBigProps> = ({
       },
     },
   }
+  const mapTicks = () => {
+    if (!props.data || !props.data[0]) {
+      return null
+    }
+
+    const data = props.data[0].data
+    const tickInterval = Math.round(data.length / 6)
+    return data
+      .filter((point) => data.indexOf(point) % tickInterval === 0)
+      .map((point) => point.x)
+  }
+
   return (
     <div style={{ width: '100%', height: isBig ? '400px' : '280px' }}>
       <ResponsiveLine
@@ -32,7 +44,7 @@ const LineChart: React.FC<LineSvgProps & IsBigProps> = ({
           reverse: false,
         }}
         axisTop={null}
-        axisBottom={isBig ? {} : null}
+        axisBottom={{ tickValues: mapTicks() }}
         axisRight={null}
         colors={chartColors}
         curve="monotoneX"