fix chart options

Author: tylersayshi

frontend/routes/package/(_islands)/DownloadChart.tsx

@@ -86,59 +86,21 @@ export function DownloadChart(props: Props) {
       borderColor: isDarkMode ? "#47515c" : "#e5e8eb", // jsr-gray-700 for dark mode, jsr-gray-100 for light
       strokeDashArray: 3,
     },
+    responsive: [
+      {
+        breakpoint: 768,
+        options: {
+          legend: {
+            horizontalAlign: "left",
+          },
+        },
+      },
+    ],
   });
 
   useEffect(() => {
     (async () => {
       const { default: ApexCharts } = await import("apexcharts");
-      chartRef.current = new ApexCharts(chartDivRef.current!, {
-        chart: {
-          type: "area",
-          stacked: true,
-          animations: {
-            enabled: false,
-          },
-          height: "100%",
-          width: "100%",
-          zoom: {
-            allowMouseWheelZoom: false,
-          },
-        },
-        legend: {
-          horizontalAlign: "center",
-          position: "top",
-          showForSingleSeries: true,
-        },
-        tooltip: {
-          items: {
-            padding: 0,
-          },
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        stroke: {
-          curve: "straight",
-          width: 1.7,
-        },
-        series: getSeries(props.downloads, "weekly"),
-        xaxis: {
-          type: "datetime",
-          tooltip: {
-            enabled: false,
-          },
-        },
-        responsive: [
-          {
-            breakpoint: 768,
-            options: {
-              legend: {
-                horizontalAlign: "left",
-              },
-            },
-          },
-        ],
-      });
       const isDarkMode = document.documentElement.classList.contains("dark");
 
       chartRef.current = new ApexCharts(