c3.jsのスタックバーチャートの表示順を変更する

c3.jsでスタックバーチャートを書いた際に、スタックバーの順番を変更できないか？という要望を受けたので調査しました。凡例の順番とツールチップで表示される順番がリンクしていないので、見辛いということでした。

公式ドキュメントによると、data.orderに指定できるようでしたが、

• 値の昇順(asc)
• 値の降順(desc)
• 順番を決める関数を定義する(function)
• 指定しない(null)

しかなさそうでした。

C3.js | D3-based reusable chart library

data.orderに何も指定しないと順番が適当に…

試しに、data.orderにスタックバーに表示するjsonのkeyを配列で渡したところ、その順番に表示することができました！

コード

まず、コードペンで書いたコードを載せておきます。

See the Pen c3-stacked-bar-chart-order by patorash (@patorash) on CodePen.

解説

data.orderに、data.keys.valueで指定した配列とは逆順に指定しています。reverse関数を使うのが簡単でしょう。

data: {
  json: json,
  type: 'bar',
  keys: {
    value: ['data1', 'data2', 'data3', 'data4']
  },
  groups: [['data1', 'data2', 'data3', 'data4']],
  labels: {
    format: d3.format('01,d')
  },
  order: ['data1', 'data2', 'data3', 'data4'].reverse()
},

こうすると、スタックバーの順番は制御できたのですが、今度はツールチップで表示される値の順番が逆になってしまいました…😢

スタックの順番は制御できたものの、凡例の順番が逆に…

そのため、tooltip.orderを指定します。

tooltip: {
  order: ['data1', 'data2', 'data3', 'data4']
},

これで、期待した順番で表示されるようになりました。

凡例の順番に並ぶようになった