fix(readme): Update examples to use updated scales option (#19)

Signed-off-by: Tim Hårek Andreassen <tim@harek.no> Co-authored-by: hashrock <hashrock@users.noreply.github.com>
denoland · Aug 23, 2023 · 899cdeb · 899cdeb
1 parent 59cd1db
commit 899cdeb
Showing 1 changed file with 50 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -33,23 +33,26 @@ export default function Home() {
           type="line"
           options={{
             devicePixelRatio: 1,
-            scales: { yAxes: [{ ticks: { beginAtZero: true } }] },
+            scales: { y: { beginAtZero: true } },
           }}
           data={{
             labels: ["1", "2", "3"],
-            datasets: [{
-              label: "Sessions",
-              data: [123, 234, 234],
-              borderColor: ChartColors.Red,
-              backgroundColor: transparentize(ChartColors.Red, 0.5),
-              borderWidth: 1,
-            }, {
-              label: "Users",
-              data: [346, 233, 123],
-              borderColor: ChartColors.Blue,
-              backgroundColor: transparentize(ChartColors.Blue, 0.5),
-              borderWidth: 1,
-            }],
+            datasets: [
+              {
+                label: "Sessions",
+                data: [123, 234, 234],
+                borderColor: ChartColors.Red,
+                backgroundColor: transparentize(ChartColors.Red, 0.5),
+                borderWidth: 1,
+              },
+              {
+                label: "Users",
+                data: [346, 233, 123],
+                borderColor: ChartColors.Blue,
+                backgroundColor: transparentize(ChartColors.Blue, 0.5),
+                borderWidth: 1,
+              },
+            ],
           }}
         />
       </div>
@@ -101,23 +104,26 @@ export const handler: Handlers = {
       type: "line",
       data: {
         labels: ["1", "2", "3"],
-        datasets: [{
-          label: "Sessions",
-          data: [123, 234, 234],
-          borderColor: ChartColors.Red,
-          backgroundColor: transparentize(ChartColors.Red, 0.5),
-          borderWidth: 1,
-        }, {
-          label: "Users",
-          data: [346, 233, 123],
-          borderColor: ChartColors.Blue,
-          backgroundColor: transparentize(ChartColors.Blue, 0.5),
-          borderWidth: 1,
-        }],
+        datasets: [
+          {
+            label: "Sessions",
+            data: [123, 234, 234],
+            borderColor: ChartColors.Red,
+            backgroundColor: transparentize(ChartColors.Red, 0.5),
+            borderWidth: 1,
+          },
+          {
+            label: "Users",
+            data: [346, 233, 123],
+            borderColor: ChartColors.Blue,
+            backgroundColor: transparentize(ChartColors.Blue, 0.5),
+            borderWidth: 1,
+          },
+        ],
       },
       options: {
         devicePixelRatio: 1,
-        scales: { yAxes: [{ ticks: { beginAtZero: true } }] },
+        scales: { y: { beginAtZero: true } },
       },
     });
   },
@@ -140,7 +146,7 @@ import { Chart as default } from "$fresh_charts/island.tsx";
 ```tsx
 import { Head } from "$fresh/runtime.ts";
 import { ChartColors } from "$fresh_charts/utils.ts";
-import { Chart } from "../islands/chart.tsx";
+import Chart from "../islands/chart.tsx";
 
 export default function Home() {
   return (
@@ -152,21 +158,24 @@ export default function Home() {
         <Chart
           type="line"
           options={{
-            scales: { yAxes: [{ ticks: { beginAtZero: true } }] },
+            scales: { y: { beginAtZero: true } },
           }}
           data={{
             labels: ["1", "2", "3"],
-            datasets: [{
-              label: "Sessions",
-              data: [123, 234, 234],
-              borderColor: ChartColors.Red,
-              borderWidth: 1,
-            }, {
-              label: "Users",
-              data: [346, 233, 123],
-              borderColor: ChartColors.Blue,
-              borderWidth: 1,
-            }],
+            datasets: [
+              {
+                label: "Sessions",
+                data: [123, 234, 234],
+                borderColor: ChartColors.Red,
+                borderWidth: 1,
+              },
+              {
+                label: "Users",
+                data: [346, 233, 123],
+                borderColor: ChartColors.Blue,
+                borderWidth: 1,
+              },
+            ],
           }}
         />
       </div>