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 ; };