Chart.jsの水平xAxisラベル

Question

私は小さなdivの中に配置する必要があるchart-js棒グラフを使用していますので、x軸のラベルを対角線の代わりに水平にする方法を探していました。ポイントは、現在のラベルが使用可能なスペースのほぼ40％を消費しているため、実際のバーの高さをできるだけ高くすることです。

これは私のコードです：

let options = { 
    responsive: true, 
    maintainAspectRatio: false, 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
     }], 
     xAxes: [{ 
      display: false 
     }] 
    } 
}; 
let ctx = document.getElementById('barChartCtx'); 
let barChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

私は一時的にX軸ラベルを無効にしています。それは動作しますが、理想的には私はそれらを水平にしたいと思います。思考？

Answer 1

これを制御するには、スケールティックmaxRotationとminRotationプロパティを使用できます。

ここは例です。

let options = { 
    responsive: true, 
    maintainAspectRatio: false, 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
     }], 
     xAxes: [{ 
      ticks: { 
       minRotation: 0 
       maxRotation: 0 
      } 
     }] 
    } 
}; 

斜めの理由は、chart.jsがデフォルトの水平方向に収まらないと計算されたためです。水平のときにそれらが互いにオーバーフローしていることが分かったら、上記のプロパティを使用して回転を微調整し、わずかに対角になるようにします。