first

src/data/dashboards/apex-demo/demo9-bar.ts

@@ -0,0 +1,86 @@
+export function useDemo9Bar() {
+  const themeColors = useThemeColors()
+  const series = shallowRef<any[]>([])
+
+  watchEffect(() => {
+    series.value = [
+      {
+        name: 'Desktops',
+        data: [44, 55, 41, 67, 22, 43],
+      },
+      {
+        name: 'Phones',
+        data: [13, 23, 20, 8, 13, 27],
+      },
+      {
+        name: 'Tablets',
+        data: [11, 17, 15, 15, 21, 14],
+      },
+      {
+        name: 'Hybrid',
+        data: [21, 7, 25, 13, 22, 8],
+      },
+    ]
+  })
+
+  return reactive({
+    type: 'bar',
+    height: 280,
+    series,
+    options: {
+      chart: {
+        stacked: true,
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: true,
+        },
+      },
+      colors: [
+        themeColors.purple,
+        themeColors.info,
+        themeColors.lime,
+        themeColors.purple,
+        themeColors.orange,
+      ],
+      responsive: [
+        {
+          breakpoint: 480,
+          options: {
+            legend: {
+              position: 'top',
+            },
+          },
+        },
+      ],
+      plotOptions: {
+        bar: {
+          horizontal: false,
+        },
+      },
+      xaxis: {
+        type: 'datetime',
+        categories: [
+          '01/01/2011 GMT',
+          '01/02/2011 GMT',
+          '01/03/2011 GMT',
+          '01/04/2011 GMT',
+          '01/05/2011 GMT',
+          '01/06/2011 GMT',
+        ],
+      },
+      title: {
+        text: 'Stacked Bars',
+        align: 'left',
+      },
+      legend: {
+        position: 'top',
+        horizontalAlign: 'center',
+      },
+      fill: {
+        opacity: 1,
+      },
+    },
+  })
+}