Chart.js を使って円グラフを描くときによく悩まされることがあります。

「AとBの2つの値の比率を視覚的に比べる」ことを目的に円グラフを使うことがあるのですが、これを Chart.js で描こうとすると、以下のような感じになります:
  :
  :
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

<script>
var ctx = document.getElementById( 'myChart' ).getContext( '2d' );
var chart = new Chart( ctx, {
  type: 'pie',
  data: {
    labels: [ 'A', 'B' ],  //. ラベルは A, B の順
    datasets: [ {
      data: [ 10, 20 ],    //. A の値が10Bの値が 20 であるとする
      backgroundColor: [ '#ff0000', '#0000ff' ]
    } ]
  }
});
</script>


  :
  :

↑この例では A と B という2つの値を円グラフで表示しようとしています。A の値を 10 、B の値を 20 とした上で、 A を赤に、B を青で指定しています。

これをブラウザで表示するとこうなります:
2018060501


・・・違う、惜しい。そうじゃないんだ!

ラベル部分が左A右Bになっているので、円グラフも左側に赤いA右側に青いBを持ってきたい。。。 でもこれが難しい(苦笑)。

Chart.js の円グラフの場合、円の頂点を始点として時計回りにデータが描画されるので、どうしても右側に最初のデータ(A)が描かれてしまい、左側には2つ目のデータ(B)が描画されます。つまり円グラフとしてはラベルとは逆に右に赤いA左側に青いBが表示されてしまうのです。

ここ、なんとかして逆にできないかなあ・・・ と色々工夫しているのですが、これというアイデアが浮かばず、諦めています。

残念・・・  Chart.js 以外のグラフ描画ライブラリだとなんとかなるのかなあ・・・