Mixed series type with 'rallychart' component

Question

I am attempting to add a HighCharts chart to my app using the 'rallychart' component. The chart I am looking to recreate can be seen here:

http://jsfiddle.net/sdWr3/

It uses a combination of 'line' and 'columnrange' elements to achieve the desired effect. I can get both types of charts to render separately using the 'rallychart' by setting the configuration as follows:

chartConfig:
    chart : {
        type : 'line' //Or 'columnrange'
    }
}

If I do not specify this setting, and instead specify the chart type in the series object, like I have in the previous example, I get the following error message when trying to render the chart:

I'm not sure if there is an error in my configuration, or if this could perhaps be a problem with the component itself.

Answer 1

I submitted a bug. A simplified code, that does not use a combination of chart types, but only columnrange still returns the same error if type: 'columnrange' is set in the series. It works if it is set

chartConfig: {

       chart:{type: 'columnrange'}

}

but that does not help in the case when we want a mixed type chart. When I tested a different type in the series, e.g. column, it worked, which seems to indicate that this issue does not affect all types.

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',

    launch: function() {
       this._makeChart();
    },

    _makeChart:function(){
    var _series = [

                 {
            type : 'columnrange',
            name : 'Range',
            data : [
                    [-9.7, 9.4],
                    [-8.7, 6.5],
                    [-3.5, 9.4],
                    [-1.4, 19.9],
                    [0.0, 22.6],
                    [2.9, 29.5],
                    [9.2, 30.7],
                    [7.3, 26.5],
                    [4.4, 18.0],
                    [-3.1, 11.4],
                    [-5.2, 10.4],
                    [-13.5, 9.8]
            ],
            pointWidth: 4
           }
           ];

        this.add(
        {
            xtype: 'rallychart',
            viewConfig: {
                loadMask: false
            },
            id: 'chart',
            chartConfig: {
        //chart:{type: 'columnrange'}
        chart:{}
            },

            chartData: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                series: _series
            }

        });

    }
});

There is another detail. Notice that I set categories inside chartData, and not in xAxis. See in source that chartConfig.xAxis.categories is overwritten:

chartConfig.xAxis.categories = this.chartData.categories;

If it is not defined in chartData, but defined in chartConfig.xAxis, the values in xAxis will have not effect.