在chart.js中将y轴旋转到顶部，将x轴旋转到左边

Question

我有一个当前显示如下的图表：

但是我想旋转它使其看起来像这样：

（不更改“您的评分”）方向。

将x轴放在左侧，将y轴放在顶部应该相对简单，但是我很挣扎。

以下是相关代码：

var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
  type:'line',    // 'horizontalBar',
  data: horizontalBarChartData,
  options: {
    annotation: {
         annotations: [{
           type: 'line',
       mode: 'vertical',
       scaleID: 'y-axis-0',
       value: 20,
       label: {
         content: 'Your Rating   ',
         enabled: true
           }
         }]
       },
scales: {
    xAxes: [{
        gridLines: {
            display:false
        }
    }],
    yAxes: [{
      gridLines: {
            display:false
        }
    }]
},

    // 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

    responsive: true,
    legend: {

       display: false
    },
    title: {
      display: false,
      text: 'text4'
    }
  }
});

}