Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"

Question

I try to display a line chart with two yAxis in Chart.js.

My Code:

 window.onload = function() {
   var ctx = document.getElementById("chart").getContext("2d");
   var myChart = new Chart(ctx, {
     type: "line",
     data: {
       "labels": [
         "01.12.2015",
         "02.12.2015",
         "03.12.2015",
         "04.12.2015",
         "30.12.2015"
       ],
       "datasets": [{
         "label": "DEA Burrweiler Druck Abgabe",
         "fill": "false",
         yAxisID: "y-axis-0",
         "data": [
           8.7913,
           8.6985,
           8.7914,
           8.7948,
           8.7882
         ]
       }, {
         "label": "DEA Burrweiler Druck Zulauf",
         "fill": "false",
         yAxisID: "y-axis-0",
         "data": [
           4.5997,
           4.5526,
           4.5915,
           4.5937,
           4.5795
         ]
       }, {
         "label": "DMS Flemlingen Durchfluss",
         "fill": "false",
         yAxisID: "y-axis-1",
         "data": [
           1.9588,
           2.4226,
           2.1392,
           2.223,
           1.9048
         ]
       }]
     },
     options: {
       yAxes: [{
         position: "left",
         "id": "y-axis-0"
       }, {
         position: "right",
         "id": "y-axis-1"
       }]
     }

   });
 };

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

The error says: "TypeError: yScale is undefined"

When I remove the yAxisID options in the datasets, the Chart gets displayed but only with one yAxis.

    window.onload = function() {
      var ctx = document.getElementById("chart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "line",
        data: {
          "labels": [
            "01.12.2015",
            "02.12.2015",
            "03.12.2015",
            "04.12.2015",
            "30.12.2015"
          ],
          "datasets": [{
            "label": "DEA Burrweiler Druck Abgabe",
            "fill": "false",
            "data": [
              8.7913,
              8.6985,
              8.7914,
              8.7948,
              8.7882
            ]
          }, {
            "label": "DEA Burrweiler Druck Zulauf",
            "fill": "false",
            "data": [
              4.5997,
              4.5526,
              4.5915,
              4.5937,
              4.5795
            ]
          }, {
            "label": "DMS Flemlingen Durchfluss",
            "fill": "false",
            "data": [
              1.9588,
              2.4226,
              2.1392,
              2.223,
              1.9048
            ]
          }]
        },
        options: {
          yAxes: [{
            position: "left",
            "id": "y-axis-0"
          }, {
            position: "right",
            "id": "y-axis-1"
          }]
        }

      });
    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

I have the yAxis defined in the chart options. So whats the Problem, what am I missing?

Answer 1

The yAxes should be under a property scales under options, like so

...
options: {
  scales: {
      yAxes: [{
      ..

---

Fiddle - http://jsfiddle.net/dahd27d7/