title: Floating bar + bar to compare values to a "reference"
body: <p>I would like to draw a vertical bar chart with "reference" value that changes for each bar. For instance, let's say I'm drawing the level of sales for this season, and I want to compare it to the level of sales of the previous season. </p>
  
  <p>I know I can draw a two series bar chart, but I prefer this way as it gives a lot more emphasis on the actual season.</p>
  
  <p>I have managed to draw a floating vertical bar over a "regular" vertical bar, but I would like to set the floating bar larger than the "regular" vertical bar. Both series NEED to share the same scale and min-max points.</p>
  
  <p>Oh and ideally, I would like to set the color of the "reference" serie (previous season) to black without taking the place of the other colours (I'm using a color palette to draw series, and each serie has its own color from one chart to another). Would it be possible?</p>
  
  <p>Below is a picture of what I am trying to achieve, plus my code so far:</p>
  
  <p>Picture: <a href="https://flic.kr/p/oXKWhU" rel="nofollow">https://flic.kr/p/oXKWhU</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;script type="text/javascript" src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
  
  &lt;div class="chartContainerMax" id="chart1" style="height:600px"&gt;&lt;/div&gt;
  
  
  &lt;body&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
  
      var chart = dimple.newSvg("#chart1", "100%", "100%");
      d3.csv("data/test.csv", function (data) {
          data = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"]) // Filtering values
          var myChart = new dimple.chart(chart, data);
          myChart.setMargins("10%", "5%", "5%", "10%")
              var xAxis = myChart.addCategoryAxis("x", "Month");
              xAxis.addOrderRule("Date");
              var yAxis = myChart.addMeasureAxis("y", "Price");
              var yyAxis = myChart.addMeasureAxis(yAxis, "Distribution");
              myChart.addSeries("Season",  dimple.plot.bar, [xAxis, yAxis]);
              var myRef = myChart.addSeries("Previous",  dimple.plot.bar, [xAxis, yyAxis]);
              myRef.stacked = false;
              //myRef.dimpleColor("#292E3A");
              //myRef.shapes.selectAll("rect").attr("transform", "translate(0, -100)");
              //myRef.shapes.selectAll("rect").attr("color", "black");
              myChart.addLegend("5%", "5%", "90%", "10%", "right");
          myChart.draw();
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any advice would be welcome.
  Thank you!</p>