support multiple axes #13

sluger · sluger · commit b6429c72c6f2 · 2019-07-03T10:22:55.000+02:00
diff --git a/samples/two-yaxis.html b/samples/two-yaxis.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Chart.js Error Bars Plugin</title>
+  <script src="../node_modules/chart.js/dist/Chart.bundle.js" type></script>
+  <script src="../build/Plugin.Errorbars.js"></script>
+  <style>
+    canvas {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container" style="width: 50%;">
+    <canvas id="canvas"></canvas>
+  </div>
+
+  <script>
+    var color = Chart.helpers.color;
+    var barChartData = {
+      labels: ["January", "February", "March", "April"],
+      datasets: [
+        {
+          label: "Dataset 1",
+          //backgroundColor: '#d95f02',
+          borderColor: "#d95f02",
+          borderWidth: 1,
+          data: [56, 33, 78, 54],
+          errorBars: {
+            January: {plus: 15, minus: -34},
+            February: {plus: 15, minus: -3},
+            March: {plus: 35, minus: -14},
+            April: {plus: 45, minus: -4}
+          },
+          yAxisID: "y-axis-1"
+        },
+        {
+          label: "Dataset 2",
+          //backgroundColor: '#1b9e77',
+          borderColor: "#1b9e77",
+          borderWidth: 1,
+          data: [100, 77, 33, 45],
+          errorBars: {
+            January: {plus: 15, minus: -34},
+            February: {plus: 5, minus: -24},
+            March: {plus: 20, minus: -4},
+            April: {plus: 45, minus: -20}
+          },
+          yAxisID: "y-axis-2"
+        }
+      ]
+    };
+
+    window.onload = function () {
+      var ctx = document.getElementById("canvas").getContext("2d");
+      window.myBar = new Chart(ctx, {
+        type: "bar",
+        data: barChartData,
+        options: {
+          responsive: true,
+          legend: {
+            position: "top"
+          },
+          title: {
+            display: true,
+            text: "Chart.js Error Bars Plugin"
+          },
+          scales: {
+            yAxes: [
+              {
+                type: "linear",
+                display: true,
+                position: "left",
+                id: "y-axis-1"
+              },
+              {
+                type: "linear",
+                display: true,
+                position: "right",
+                id: "y-axis-2",
+                gridLines: {
+                  drawOnChartArea: false
+                }
+              }
+            ]
+          },
+          plugins: {
+            chartJsPluginErrorBars: {
+              width: "60%"
+              //color: 'darkgray'
+            }
+          }
+        }
+      });
+    };
+  </script>
+</body>
+
+</html>
diff --git a/src/plugin.js b/src/plugin.js
@@ -150,6 +150,19 @@ const ErrorBarsPlugin = {
     ctx.restore();
   },
 
+  /**
+   * resolve scale for current dataset from config and fallback to default scale
+   * @param chart chartjs instance
+   * @param horizontal orientation
+   * @param i dataset index
+   */
+  _resolveScale(chart, horizontal, i) {
+    const xAxisId = chart.data.datasets[i].xAxisID || 'x-axis-0';
+    const yAxisId = chart.data.datasets[i].yAxisID || 'y-axis-0';
+    const scaleId = horizontal ? xAxisId : yAxisId;
+    return chart.scales[scaleId];
+  },
+
   /**
    * plugin hook to draw the error bars
    * @param chart chartjs instance
@@ -176,7 +189,6 @@ const ErrorBarsPlugin = {
 
     // determine value scale and orientation (vertical or horizontal)
     const horizontal = this._isHorizontal(chart);
-    const vScale = horizontal ? chart.scales['x-axis-0'] : chart.scales['y-axis-0'];
 
     const errorBarWidths = (Array.isArray(options.width) ? options.width : [options.width]).map((w) => this._computeWidth(chart, horizontal, w));
     const errorBarLineWidths = Array.isArray(options.lineWidth) ? options.lineWidth : [options.lineWidth];
@@ -188,6 +200,7 @@ const ErrorBarsPlugin = {
 
     // map error bar to barchart bar via label property
     barchartCoords.forEach((dataset, i) => {
+      const vScale = this._resolveScale(chart, horizontal, i);
       dataset.forEach((bar) => {
         let cur = errorBarCoords[i];
         if (!cur) {
