C3.jsで面階段グラフを描く（サンプル）

jsファイルは下記の通り

var rank = ['A', 'B', 'C', 'D']
var data = {
  name: ['I', 'You', 'He', 'She'],
  A: [10, 11, 14, 19], B: [20, 22, 26, 32], C: [30, 28, 24, 18], D: [40, 39, 36, 31]
}

var chart = c3.generate({
    bindto: '#chart',
    data: {
        //mimeType: 'json', // データを外部からファイルを取り込む場合、取り込みファイルのタイプを指定する
        json: data,
        x: 'name', 
        type: 'area-step', // グラフ種別：階段面グラフ
        // 'line', 'spline', 'step', 'area', 'area-spline', 'area-step' are also available to stack
        groups: [ rank ], // 積み上げるデータのグルーピング
        order: null // ソート順：データの定義順
    },
    /* 軸 */
    axis: {
        x: {
            type: 'category', // this needed to load string x value
            tick: {
              //centered: true,
              outer: false // 外側ティック非表示
            }
        },
        y: { max: 100, padding:0, show: false }
    },
    /* 凡例 */
    legend: { show: false }, // 非表示
    /* グラフ描画面積 */
    size: { width: 512, height: 100 },
    /* インタラクション(showing/hiding tooltip, selection, mouse events, etc) */
    interaction: {
        enabled: true
    },
    /* ズーム */
    zoom: {
        enabled: true
    }
});