src/frontend/routes/apps.$appId.villages.$villageId.tsx

@@ -110,14 +110,20 @@ function ActivityChart({ villageId }: { villageId: string }) {
           h={280}
           data={data}
           dataKey="label"
-          series={[{ name: 'aktivitas', color: '#2563EB', label: 'Activity' }]}
+          series={[{ name: 'aktivitas', color: '#2563EB' }]}
           curveType="monotone"
           withTooltip
           withDots
           tickLine="none"
           gridAxis="x"
           tooltipAnimationDuration={150}
+          withPointLabels={false}
+          withXAxis={true}
+          withYAxis={true}
           fillOpacity={1}
+          tooltipProps={{
+            allowEscapeViewBox: { x: true, y: false },
+          }}
           areaProps={{
             strokeWidth: 2.5,
             fill: 'url(#villageAreaGrad)',
@@ -129,6 +135,14 @@ function ActivityChart({ villageId }: { villageId: string }) {
             strokeWidth: 2,
             stroke: '#2563EB',
             fill: 'white',
+            style: { cursor: 'pointer' },
+          }}
+          activeDotProps={{
+            r: 6,
+            strokeWidth: 2,
+            stroke: '#2563EB',
+            fill: '#2563EB',
+            children: null,
           }}
         >
           <defs>