title: Dual Y axis line chart in dc.js
body: <p>I have a composite chart of three line charts. One of the charts is using a "fake" group as suggested <a href="https://stackoverflow.com/questions/24857553/simple-way-to-add-raw-data-to-dc-js-composite-chart-via-ajax/24884871#24884871">here.</a> As you can see in the snapshot below though the scale of the 3rd chart is very different from the other two. The solution I would like is to have a dual axis chart as shown <a href="http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html" rel="nofollow noreferrer">here in pure d3.</a> I think it can be done using a .renderlet() on the main composite chart but I was wondering if there was a "sexier" solution with pure dc.js?</p>
  
  <p>Here is a snapshot:</p>
  
  <p><img src="https://i.stack.imgur.com/mCdqM.png" alt="enter image description here"></p>
  
  <p>and here is my code. (in coffeescript) I tried using .y and .yAxis on the internal charts but that had no effect.</p>
  
  <pre><code>    actualValuesChart = dc.lineChart(mainChart)
          .group(metric, "actual " + @displayName)
          .valueAccessor (d) -&gt; d.value.avg
          .colors(['green'])
          .interpolate('basis-open')
  
      normValuesChart = dc.lineChart(mainChart)
          .group(metric, "normal " + @displayName)
          .valueAccessor (d) -&gt; d.value.avg_avg
          .colors(['rgba(0,0,255,1)'])
          .interpolate('basis-open')
  
      clipsCountChart = dc.lineChart(mainChart)
          .group(buildFakeGroup(defaultClipsArray))
          .colors(['red'])
          .interpolate('basis-open')
          # .y(d3.scale.linear().range([100, 0]))
          # .yAxis(d3.svg.axis().scale(d3.scale.linear().range([100, 0])))
  
      mainChart
          .dimension(@dimension.monthStamp)
          .width(thisChart.width + 30)
          .height(thisChart.width*.333)
          .yAxisLabel(@displayName)
          .elasticY(true)
          .x(d3.time.scale().domain([minDate,maxDate]))
          .xUnits(d3.time.months)
          .brushOn(true)
          .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
          .renderHorizontalGridLines(true)
          .compose([actualValuesChart,normValuesChart,clipsCountChart])
  </code></pre>