追記：やっぱ、重なりが以前のaddと違うのは良くないのでもう少し考えようかなと思ったけれど、長い目で見たら使いやすい方が良いと思いつつあります。以前のadd v1.08.6 http://jsfiddle.net/UkdvS/347/ 今回のv1.08.7b http://jsfiddle.net/UkdvS/349/ v1.08.7b4現在：　v1.08.7b3までは、複合チャートのadd, after, beforeメソッドを使う時の、チャート領域の形に影響するプロパティを「奥側のチャートに依存させる」ことを考えていましたが、これらもタイトルと同様に前側のチャートに連動させようと思います。おそらくその方が、使う側から見てシンプルだと思うからです。

.add() メソッド

記述例：

    ccchart
      .init('hoge1', data1)
      .add(data2)//data2のchartを後ろに追加　data2のY軸は右
      
    ccchart
      .init('hoge1', data1)
      .before(data2)//data2のchartを前に追加　data2のY軸は左
      
    ccchart
      .init('hoge1', data1)
      .after(data2)//addと同じ　data2のchartを後ろに追加　data2のY軸は右

機能：

X軸(横)が共通している2つのチャートを重ねて表示する。

重なり

チャートの重なりは、addとafterが後ろに、beforeは前に。

タイトル

titleとsubTitleは、手前に重なったチャートのものが表示される。
たとえば、addとafterメソッドでは、initのtitleとsubTitleが表示される。
beforeメソッドでは、initではなくbeforeのtitleとsubTitleが表示される。

Y軸

Y軸は、addとafterメソッドでは、.initで指定したdata1をY軸右に描き、addやafterで指定したdata2をY軸左に描く。
beforeメソッドではY軸が逆になる。.initで指定したdata1をY軸左に描き、beforeで指定したdata2をY軸右に描く。

サイズ、チャート領域、色など前面チャートの設定が優先のプロパティ

チャート領域の形や色に影響するチャート色や形などに影響する次のプロパティは前面のチャートに依存する。

      //前面チャートの設定が優先となるconfigプロパティ
      //unitやhanreiの詳細はチャート毎に異なるので除いています
      var lists = [
           //タイトル
             "title"
            ,"titleColor"
            ,"titleFont"
            ,"titleTextAlign"
            ,"titleY"
           //サブタイトル
            ,"subTitle"
            ,"subtitle"//キャメルケースを推奨
            ,"subTitleColor"
            ,"subTitleFont"
            ,"subTitleTextAlign"
            ,"subTitleY"
          //タイトル有無
            ,"onlyChart"
            ,"onlyChartWidthTitle"
          //水平軸目盛値
            ,"xScaleColor"
            ,"xScaleFont"
            ,"xScaleAlign"
            ,"xScaleXOffset"
            ,"xScaleYOffset"
            ,"xScaleSkip"
            ,"colNamesTitleOffset"
          //垂直軸目盛値 
            ,"yScaleColor"
            ,"yScaleFont"
            ,"yScaleAlign"
            ,"yScaleXOffset"
            ,"yScaleYOffset"
          //高さ・幅
            ,"height"
            ,"width"
          //凡例
            ,"useHanrei"
          //パディング
            ,"paddingTop"
            ,"paddingRight"
            ,"paddingLeft"
            ,"paddingBottom"
          //目盛り線の本数 
            ,"axisXLen"
            ,"axisYLen"
          //目盛り線の幅
            ,"axisXWidth"
            ,"axisYWidth"
          //目盛り線の色
            ,"xColor"
            ,"yColor"
          //背景色
            ,"bg"
          //背景グラデーション
            ,"bgGradient"
          //テキストカラーオブジェクト
            ,"textColors"
          //影オブジェクト
            ,"shadows"
      ];

paddingRightDefaultは160。但し、"useHanrei":"no"の時のpaddingRightDefaultは110。

凡例

凡例は、下から順に積み上げる。重なりの最奥が一番下。手前が一番上。
2つのチャートの凡例間の隙間は、hanreisYSpaceで指定できる。default 10

制限事項：

重ねた下のchartにはマーカーとツールチップがつかない＞＜

追加された関連プロパティ：

チャートデータ用
config.hanreisYSpace //最初の凡例と次の凡例の隙間 default 10

ccchartオブジェクト配下
ccchart.addFront object 前に描画するチャートのオプションやcallback
ccchart.addBack   object 後ろに描画するチャートのオプションやcallback
　　例：{id: canvasのid名, op: initなどの引数op, callback: initなどの引数callback};

ざっくりフロー

hoge1: afterとadd

data2を後ろへ追加する

<script src="ccchart-v1.08.7.js" charset="utf-8"></script>
<canvas id="hoge1"></canvas>
<script>
ccchart
    .init('hoge1', data1)
    .add(data2) //data2をdata1の後ろへ追加　.after(data2)も同じ 
</script>

data1がタイトルになり、前に来る。

hoge2: before

<script src="ccchart-v1.08.7.js" charset="utf-8"></script>
<canvas id="hoge2"></canvas>
<script>
ccchart
    .init('hoge2', data1)
    .before(data2) //data2をdata1の前へ追加
</script>

data2がタイトルになり、前に来る。

hoge3: 切り替え

<script src="ccchart-v1.08.7.js" charset="utf-8"></script>
<canvas id="hoge3"></canvas>
<script>
ccchart
    .init('hoge3', data1)
    .add(data2)
</script>

//切り替え例
<button onclick="
  this.tgl = (this.tgl === false)? true:false;

  if(this.tgl){
    ccchart
      .init('hoge3', data1)
      .before(data2)
  } else {
    ccchart
      .init('hoge3', data1)
      .add(data2)
  }

  ">add(or after)/before 切り替え　</button>

※この場合lineチャートは前に出るとマーカー等が表示されます

hoge4: onlyChart, width, height

チャート色や形などに影響する次のプロパティは前面のチャートに依存する。

<script src="ccchart-v1.08.7.js" charset="utf-8"></script>
<canvas id="hoge4"></canvas>
<script>
ccchart
    .init('hoge4', {//こっちが後ろ
    "config": {
        "type": "area",
        "title": "data3",
        "subtitle": "あいうえお",
        "minY": 0,
        "unit":"data3",
        "borderWidth": 4,
        "hanreiMarkerStyle": 'arc'
    },
    "data": [
        ["年度",2007,2008,2009,2010,2011,2012,2013],
        ["0-data4",5,53,68,95,62,67,10],
        ["1-data4",23,45,55,69,68,36,20],
        ["2-data4",13,32,65,45,66,27,30],
        ["3-data4",17,23,32,9,16,27,32]/*,
        ["4-data4",39,63,25,25,44,67,60],
        ["5-data4",20,13,31,20,49,30,80]*/
    ]
})
    .before({//beforeなのでこっちが前 onlyChartやサイズ関連はこっちに依存する
    "config": {
        "type": "line",
        "title": "data5",
        "minY": 0,
        "onlyChart": "yes",
        "width":400,
        "height":300,
        "unit":"data5",
        "useMarker":"css-ring",
        "useVal": "yes",
        "borderWidth": 4,
        "hanreiMarkerStyle": 'arc',
        "colorSet": ["#0c6","#fff"]
    },
    "data": [
        ["年度",2007,2008,2009,2010,2011,2012,2013],
        ["0-data5",3,43,45,35,56,67,90],
        ["1-data5",20,13,31,20,42,30,80]

    ]
})
</script>

hoge5: bg, textColors, shadows...