Rally chart - column layout issues

Question

I'm having trouble getting the expected results in a chart in my Rally app. I'm trying to get an effect as seen in this jsFiddle example, with a series that creates a 'box' effect around two other series.

However, when I render it in my Rally app, the pointPadding and pointPlacement properties don't seem to be having any effect. Am I doing something wrong or is this a bug?

Highcharts Example (see jsFiddle)

Rally Example (see initializing code below)

Here's the code that initializes the chart in App.js:

  myChart = Ext.create('Rally.ui.chart.Chart', {
    id: 'myChart',
    chartColors: ['#00B7E2', '#A6A6A6', '#747474'], //, '#00809E'],
    chartData: {
      categories: this.chartIterations,
      series: [{
        name: 'Planned',
        data: [23, 65, 113, 131, 138], //me.chartPlannedBurnup,
        pointPadding: 0.25,
        pointPlacement: 0.15,
        zIndex: 1
      }, {
        name: 'Actual',
        data: [23, 65, 113, 131, 135], //me.chartActualBurnup,
        pointPadding: 0.25,
        pointPlacement: -0.15,
        zIndex: 2  
      }, {
        name: 'Hardening',
        data: [33, 0, 0, 0, 145], //me.chartHardeningCol,
        pointPadding: -.1,
        pointPlacement: 0.0,
        zIndex: 0,
        enableMouseTracking: false
      }]
    },
    chartConfig: {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Weekly Status Burnup By Release'
      },
      xAxis: {
        labels: {
          rotation: -45,
          align: 'right',
          style: {
            fontSize: '11px',
            fontFamily: 'Verdana, sans-serif'
          }
        },
        tickmarkPlacement: 'on',
        tickInterval: 1,
        title: {
          text: 'Sprints'
        },
      },
      yAxis: {
            title: {
              text: 'Points'
            },
            maxPadding: 0.1
          },
      tooltip: {
        shared: true 
      },
      plotOptions: {
        column: {
          grouping: false,
          shadow: false,
          borderWidth: 0
        }
      }
    }
  });

Answer 1

I believe Pawel is in track that this is related to differences in HighCharts versioning. Rally's AppSDK uses Highcharts 2.3.5. Your fiddle is pointing to HighCharts' current version which is 3.0.1.

This Fiddle:

http://jsfiddle.net/markwrally/jB8gK/2/

Which is a fork of yours, but pointed to HighCharts 2.3.5:

<script src="http://code.highcharts.com/2.3.5/highcharts.js"></script>
<script src="http://code.highcharts.com/2.3.5/modules/exporting.js"></script>

seems to exhibit similar behavior to your screenshot from the Rally SDK.

I'll do some checking with Rally Engineering about plans/timing for when the SDK might be updated to use HighCharts 3.