Fix Chart flickering on load

sgcarstrends · Nov 14, 2023 · 4741c10 · 4741c10
1 parent b8b66d5
commit 4741c10
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/components/Infographic.tsx b/components/Infographic.tsx
@@ -11,9 +11,7 @@ type InfographicProps = {
   electricCars: Car[];
 };
 
-const DynamicLineChart = dynamic(() => import("../components/LineChart"), {
-  loading: () => <p>Loading...</p>,
-});
+const DynamicLineChart = dynamic(() => import("../components/LineChart"));
 
 export const Infographic = ({ electricCars }: InfographicProps) => {
   const initialDatasets: ChartDataset[] = transformDataToDatasets(
@@ -39,10 +37,8 @@ export const Infographic = ({ electricCars }: InfographicProps) => {
       mode: "index",
     },
     plugins: {
-      legend: {
-        display: false,
-      },
       tooltip: {
+        itemSort: (a, b) => (b.raw as number) - (a.raw as number),
         callbacks: {
           footer: (tooltipItems) => {
             let sum = 0;

diff --git a/components/LineChart.tsx b/components/LineChart.tsx
@@ -32,7 +32,13 @@ type LineChartProps = {
 };
 
 export const LineChart = ({ data, options }: LineChartProps) => {
-  return <Line data={data} options={options} className="bg-neutral-50 p-4" />;
+  return (
+    <Line
+      data={data}
+      options={options}
+      className="bg-neutral-50 p-2 md:aspect-video md:min-h-full"
+    />
+  );
 };
 
 export default LineChart;