chart.js 複数の円グラフの大きさを均一にしたい

Question

chart.jsを使ってパイグラフを作りました。
複数のグラフが並ぶため、凡例の量に関わらず、グラフの大きさを
均一にしたいと考えています。
現状のコードは下記です。

<div class="chart-container">
  <canvas id="myPieChart"></canvas>
</div>

    <script>
 var ctx = document.getElementById("myPieChart");
 var myPieChart = new Chart(ctx, {
   type: 'pie',
   data: {
      labels: ["1〜2万円台", "2〜4万円台", "4〜6万円台", "6〜8万円台", "8〜10万円台", "10〜12万円台", "12〜14万円台", "14〜16万円台", "16〜18万円台", "18〜20万円台", "20万円以上"],
     datasets: [{
         backgroundColor: [
           "#570000",
           "#8a0000",
           "#c30d23",
           "#e68c92",
           "#ffddbe",
           "#85b8db",
           "#5485a9",
           "#d6d6d7",
           "#e6e6e7",
           "#666666",
           "#333333"
         ],
        data: [50, 5, 5, 5,5,5,5,5,5,5,5]
     }]
   },
   options: {
     legend: {
            position:'bottom',

        },
     maintainAspectRatio: false,
     title: {
       display: false,
     },
     segmentShowStroke: {
       display: false,
     },
     plugins: {
       labels: {
         render: 'percentage',
         fontColor: 'white',
         fontSize: 10
       }
     }
   }
 });
 </script>
コード

やり方を調べているのですが、解決作が見つかっておらず、
ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

Answer 1

maintainAspectRation: falseだけでは、サイズはリサイズされません。canvasタグの外側に
制御用のタグを囲み、そこにCSSでサイズ設定するといいようです。

【解決法】Chart.jsで作ったグラフが潰れてしまう。

Comments

[mikiko.s]

回答いただき、ありがとうございます。
ソースに誤りがあったので修正したのですが、canvasタグの外側はdivで囲っています。参考のサイトのように、スマホの時は適切なサイズにはなっているのですが、複数のグラフを並べた時に、凡例の高さによって、円グラフの大きさが変わってしまうのをなんとかしたい次第です。

[FKM]

maintainAspectRatio: trueにしてもだめでしょうか？

[mikiko.s]

回答いただき、ありがとうございます。
上記はまだやっていないのですが、結局、凡例は静的に書いて、入った値によって表示を変える方向でやることにしました。上記も確認してみます。ありがとうございました。