example data

src/pages/index.svelte

@@ -1,10 +1,56 @@
 <script>
-    import { metatags } from '@roxi/routify'
+  import { metatags } from "@roxi/routify";
-    import { chart } from "../chart";
+  import { chart } from "../chart";
-    metatags.title = 'My Routify app'
+  metatags.title = "My Routify app";
-    metatags.description = 'Description coming soon...'
+  metatags.description = "Description coming soon...";
 
-    var opts = {};
+  var opts = {
+    series: [
+      {
+        data: [21, 22, 10, 28, 16, 21, 13, 30],
+      },
+    ],
+    chart: {
+      height: 350,
+      type: "bar",
+      events: {
+        click: function (chart, w, e) {
+          // console.log(chart, w, e)
+        },
+      },
+    },
+    colors: colors,
+    plotOptions: {
+      bar: {
+        columnWidth: "45%",
+        distributed: true,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    legend: {
+      show: false,
+    },
+    xaxis: {
+      categories: [
+        ["John", "Doe"],
+        ["Joe", "Smith"],
+        ["Jake", "Williams"],
+        "Amber",
+        ["Peter", "Brown"],
+        ["Mary", "Evans"],
+        ["David", "Wilson"],
+        ["Lily", "Roberts"],
+      ],
+      labels: {
+        style: {
+          colors: colors,
+          fontSize: "12px",
+        },
+      },
+    },
+  };
 </script>
 
-<div use:chart={opts} />
+<div use:chart={opts} />