chartjs - multi axis line chart - cannot read property 'min' of undefined

When running the below code without the scales and yAxisID values, it renders a 2 line chart with both lines on the same axis.

UPDATE: When only removing the yAxisID values from the code it runs as before without errors - although still with only a single y axis.

When adding these elements in order to get a split axis, it returns the js error cannot read property 'min' of undefined and the canvas is blank.

Not sure if his should make a difference, but data is a json object returned through an ajax request by way of a vue.js method.

Here is an example of how the data.sales variable looks in the browser console:

sales: (187) [0, 0, 43.2874, 10.276, ..., 23.834]

var ctx = document.getElementById("chart_canvas").getContext('2d')

    var basic_line = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.labels,
        datasets: [{
          label: 'Price',
          yAxisID: 'B',
          fill: false,
          borderColor: ["#668cff"],
          data: data.price
        }, {
          label: 'Sales',
          yAxisID: 'A',
          fill: false,
          borderColor: ["grey"],
          data: data.sales
        }],
        options: {
          scales: {
            yAxes: [{
              id: 'A',
              position: 'left',
              type: 'linear' 
            }, {
              id: 'B',
              position: 'right',
              type: 'linear'
            }]
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    })