C3.jsで複合グラフを描く（サンプル）

例えば、jsファイルはこんな感じ。

var data = {
  x_A:['0101','0102','0103','0104','0105','0106','0107','0108','0109','0110','0111','0112'],
  x_Z:['0101','0102','0103','0104','0105','0106','0107','0108','0109','0110','0111','0112','0213','0313','0413'],
  y_A:[20,25,11,33,7,38,6,35,8,31,12,24],
  y_Z:[6,35,8,31,12,24,25,11,33,7,38,150,218,38,104]
}

var chart = c3.generate({
    bindto: '#chart',
    data: {
        json: data,            // specify that our above json is the data    
        xs: {
            y_A: 'x_A',
            y_Z: 'x_Z'
        },
        xFormat: '%m%d',
        types: {
            y_A: 'scatter', y_Z: 'spline'
        },            // specfify type of plot
    },
    // 軸
    axis: {
        x: {
            type: 'timeseries',   // this needed to load string x value
            label: 'x軸',
            tick: {
                format: '%m/%d',
                rotate: 90 // 90度回転
            }
        },
        y: {label: 'y軸'}
    },
    // グリッド
    grid: {
        x: {
            show: true,
            lines: [
                {value: '0113', text: '黒のx軸グリッド線', class: 'nowPosition'}
            ]
        },
        y: {
            show: true,
            lines: [
                {value: 120, text: '赤のy軸グリッド線', class: 'signalRed'},
                {value:  80, text: '普通のy軸グリッド線'},
                {value:  50, text: '普通のy軸グリッド線'}
            ]
        }
    },
    // ズーム
    zoom: {
        enabled: true
    }
});

cssファイルはこんな感じ。

.c3-xgrid-line.nowPosition line {
    stroke: black;
}
.c3-xgrid-line.nowPosition text {
    fill: black;
}
.c3-ygrid-line.signalRed line {
    stroke: red;
}
.c3-ygrid-line.signalRed text {
    fill: red;
}