title: Splines with Grouped Columns highcharts
body: <p>Is there a way to combine Splines with Grouped Columns in HighCharts?</p>
  
  <p>Here is what I have.</p>
  
  <ol>
  <li>4 Categories on X- Axis</li>
  <li>Each category has 3 columns</li>
  <li>In effect, I will have 4 groups with each group showing 3 columns each</li>
  <li>Now, on secondary Y-Axis, I want to draw a Spline that cuts across all 3 columns across all Four groups.</li>
  </ol>
  
  <p>Moreover, I would like the Spline point to be centered on each on respective column..</p>
  
  <p><a href="http://jsfiddle.net/3SjWT/8/" rel="nofollow">http://jsfiddle.net/3SjWT/8/</a></p>
  
  <p>Is this even possible? </p>
  
  <p>Thanks in Advance!</p>
  
  <p>Code:</p>
  
  <pre><code>$(function () {
      $('#container').highcharts({
          chart: {},
          title: {
              text: 'Combination chart'
          },
          xAxis: {
              categories: ['North', 'East', 'West', 'South'],
              gridLineWidth: 0
          },
  
          yAxis: [{ // Primary yAxis
              gridLineWidth: 0,
              labels: {
  
                  style: {
                      color: '#89A54E'
                  }
              },
              title: {
                  text: 'Sales',
                  style: {
                      color: '#89A54E'
                  }
              }
          }, { // Secondary yAxis
              title: {
                  text: 'Profit %',
                  style: {
                      color: Highcharts.getOptions().colors[3]
                  }
              },
              labels: {
  
                  style: {
                      color: '#4572A7'
                  }
              },
              opposite: true
          }],
  
  
          tooltip: {
              formatter: function () {
                  var s;
                  if (this.point.name) { // the pie chart
                      s = '' + this.point.name + ': ' + this.y;
                  } else {
                      s = '' + this.x + ': ' + this.y;
                  }
                  return s;
              }
          },
          labels: {
              items: [{
                  html: '',
                  style: {
                      left: '40px',
                      top: '8px',
                      color: 'black'
                  }
              }]
          },
          series: [{
              type: 'column',
              name: 'Black',
              data: [136, 123, 147, 133]
          }, {
              type: 'column',
              name: 'BW Print',
              data: [213, 187, 226, 200]
          }, {
              type: 'column',
              name: 'Fashion',
              data: [213, 187, 226, 200]
          },
  
          {
              type: 'spline',
              name: 'Profit %',
              yAxis: 1,
              data: [20, 30, 40],
              /* Profit % for Black, BW Print and Fashion
              For North, -&gt;   20, 30, 40 % 
              For East -&gt;     35, 45, 55% 
              For West -&gt;     45, 35, 50% 
              Four South -&gt;   33, 42, 55% 
              */
              color: '#CD0000',
              marker: {
                  lineWidth: 1,
                  lineColor: '#CD0000',
                  fillColor: '#CD0000'
              }
          }
  
          ]
      });
  });
  </code></pre>