diff --git a/app/page.tsx b/app/page.tsx
index daf977c..7c5ed21 100644
--- 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 (
-
+
);
};
diff --git a/components/LineChart.tsx b/components/LineChart.tsx
index beaf45c..f100b89 100644
--- 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 ;
+export const LineChart = ({ data, options }: LineChartProps) => {
+ return ;
};