Widget:Chartjs bar: Difference between revisions

Revision as of 08:01, 1 March 2024

This widget allows you to add ... widget to your wiki page.

Created by [idea-sketch.com idea-sketch.com]

For information on how to use this widget, see ...

To use this widget on your site, just install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:Chartjs bar.

@@ Line 24: / Line 24: @@
 mw.loader.using('ext.iswiki.chartjs_doughnut').then(function(){
 const ctx = document.getElementById('myChart-1');
-drawDonutChart(ctx);
+const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
+const cfg = {
+  type: 'bar',
+  data: {
+    labels: ['Jan', 'Feb'],
+    datasets: [{
+      label: 'Net sales',
+      data: data,
+      parsing: {
+        yAxisKey: 'net'
+      }
+    }, {
+      label: 'Cost of goods sold',
+      data: data,
+      parsing: {
+        yAxisKey: 'cogs'
+      }
+    }, {
+      label: 'Gross margin',
+      data: data,
+      parsing: {
+        yAxisKey: 'gm'
+      }
+    }]
+  },
+};
+new Chart(ctx, {
+  type: 'bar',
+  data: data
+  options: {
+    indexAxis: 'y',
+    // Elements options apply to all of the options unless overridden in a dataset
+    // In this case, we are setting the border of each horizontal bar to be 2px wide
+    elements: {
+      bar: {
+        borderWidth: 2,
+      }
+    },
+    responsive: true,
+    plugins: {
+    legend: {
+      position: 'right',
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Horizontal Bar Chart'
+    }
+  }
+},
+})
 });
 }]);
 </script>
 </includeonly>