title: Highcharts column percentage stacked chart worked in v 2.3.5 broken with v 3.0.2
body: <p>With version 2.3.5 of Highcharts, I have a column chart set to percentage and stacked that displays 4 columns of values for black, cyan, magenta, and yellow ink level percentages out of 100 and individual colors for each column. I also stack a series of gray values on top of these to fill out the remaining percentage out of 100 to the top of the container. I set x axis labels to the color percentages. </p>
  
  <p>I set <code>plotOptions.series.colorByPoint: true</code></p>
  
  <p>This worked perfectly with v 2.3.5 but with v 3.0.2 I still see the x axis percentages but all I see is 4 gray bars filling the container. No matter how I rearrange the colors or series I can't get the chart to display properly.</p>
  
  <pre><code>$(function () {
      var row1values = {
          "Black": 78,
          "Cyan": 55,
          "Magenta": 33,
          "Yellow": 90
      };
  
      var row1inverseValues = {
          "Black": 22,
          "Cyan": 45,
          "Magenta": 77,
          "Yellow": 10
      };
  
      var options = {
          credits: {
              enabled: false
          },
          chart: {
              renderTo: "container",
              type: "column",
              animation: false,
              spacingTop: 7,
              spacingRight: 0,
              spacingLeft: 0,
              backgroundColor: "#fff"
          },
          colors: ["#f5f5f5", "#f5f5f5", "#f5f5f5", "#f5f5f5", "#282521", "#91cfcf", "#be4e95", "#f2f000"],
          legend: {
              enabled: false
          },
          title: {
              text: null
          },
          xAxis: {
              categories: [row1values.Black, row1values.Cyan, row1values.Magenta, row1values.Yellow],
              lineWidth: 0,
              tickLength: 0,
          },
          yAxis: {
              min: 0,
              title: {
                  text: null
              },
              labels: {
                  enabled: false
              },
              gridLineWidth: 0
          },
          plotOptions: {
              series: {
                  colorByPoint: true,
                  pointPadding: 0.02,
                  groupPadding: 0.02
              },
              column: {
                  stacking: "percent",
                  animation: false,
                  enableMouseTracking: false,
                  borderWidth: 0,
                  shadow: false
              },
              area: {
                  dataLabels: {
                      enabled: false
                  }
              }
          },
          series: [{
              data: [row1inverseValues.Black, row1inverseValues.Cyan, row1inverseValues.Magenta, row1inverseValues.Yellow]
          }, {
              data: [row1values.Black, row1values.Cyan, row1values.Magenta, row1values.Yellow]
          }]
      };
  
      new Highcharts.Chart(options);
  });
  </code></pre>
  
  <p>v 2.3.5
  <a href="http://jsfiddle.net/SixEight/rptEf/" rel="nofollow">http://jsfiddle.net/SixEight/rptEf/</a></p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/2.3.5/highcharts.js"&gt;&lt;/script&gt;
  &lt;div id="container" style="height: 300px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>v 3.0.2
  <a href="http://jsfiddle.net/SixEight/KDG5y/" rel="nofollow">http://jsfiddle.net/SixEight/KDG5y/</a></p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;div id="container" style="height: 300px"&gt;&lt;/div&gt;
  </code></pre>