Add Chart options

sgcarstrends · Nov 1, 2023 · 84c971f · 84c971f
1 parent bc18b6a
commit 84c971f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,4 @@
-import type { ChartData } from "chart.js";
+import type { ChartData, ChartOptions } from "chart.js";
 import { LineChart } from "@/components/LineChart";
 import { getCarRegistrationByMake } from "@/lib/getCarRegistrationByMake";
 import { transformDataToDatasets } from "@/lib/transformDataToDatasets";
@@ -24,9 +24,22 @@ const Home = async () => {
     datasets,
   };
 
+  const options: ChartOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top" as const,
+      },
+      title: {
+        display: true,
+        text: "Singapore EV Trends",
+      },
+    },
+  };
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <LineChart data={data} />
+      <LineChart data={data} options={options} />
     </main>
   );
 };

diff --git a/components/LineChart.tsx b/components/LineChart.tsx
@@ -4,6 +4,7 @@ import {
   CategoryScale,
   Chart as ChartJS,
   ChartData,
+  ChartOptions,
   Colors,
   Legend,
   LinearScale,
@@ -27,8 +28,9 @@ ChartJS.register(
 
 type LineChartProps = {
   data: ChartData<"line">;
+  options?: ChartOptions;
 };
 
-export const LineChart = ({ data }: LineChartProps) => {
-  return <Line data={data} />;
+export const LineChart = ({ data, options }: LineChartProps) => {
+  return <Line data={data} options={options} />;
 };