Chart.jsのドキュメント見ても、ぱっと見ではどうやって二つのグラフをmixするのかが分からず、悪戦苦闘。
(2016/9/22追記:よく見たら書いてあった。http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types
でも何とかなったのでメモ。


var lineChartData = {
    datasets: [
        {
            label: "丸",
            data: [{ x: 25, y: 75, r: 15 }]
        },
        {
            type: 'line',
            label: "黄色",
            fill: true,
            backgroundColor: "rgba(254, 208, 12,0.5)",
            data: [{ x: 0, y: 60 }, { x: 30, y: 30 }, { x: 60, y: 0 }, { x: 90, y: 0 }],
            radius: 0,
            lineTension: 0
        },
        {
            type: 'line',
            label: "赤",
            fill: true,
            backgroundColor: "rgba(255, 0, 0,1)",
            data: [{ x: 0, y: 30 }, { x: 30, y: 0 }, { x: 60, y: 0 }, { x: 90, y: 0 }],
            radius: 0,
            lineTension: 0
        }
    ]
}

window.onload = function () {
    var ctx = document.getElementById("graph-area").getContext("2d");
    window.myLine = new Chart(ctx, {
        type: 'bubble', //デフォルトのtypeを指定する
        data: lineChartData
    });
}

とまぁこんな感じ。

line_bubble

このパターンでのポイントは、デフォルトをline typeにしちゃうとbubbleの方のデータがちゃんと反映されないところ。
何をデフォルトにするのかが大事。