Ext.js chart series and axis

Question

Suppose I have some data that I want to display on an Ext.js bar chart and I want my data to revolve around a custom value, "1.0" for example, on the y-axis (versus traditionally "0.0").

Meaning, the picture below has negative values represented with inverted bars, I would like values less than "1.0" to show as an inverted bar on the chart.

Is there a setting that I can set to acheive this? If so, would it be in the series and the axis definition? Maybe the chart itself?

The code for the chart displayed is below:

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

Ext.define('CPI', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'ReportingPeriod',
        type: 'string'
    }, {
        name: 'CPI_P',
        type: 'decimal'
    }, {
        name: 'CPI_C',
        type: 'decimal'
    }]
});

var store1 = Ext.create('Ext.data.Store', {
    model: 'CPI',
    data: [{
        ReportingPeriod: 'Period1',
        CPI_P: '1.9',
        CPI_C: '1.2'
    }, {
        ReportingPeriod: 'Period2',
        CPI_P: '1.2',
        CPI_C: '1.1'
    }, {
        ReportingPeriod: 'Period3',
        CPI_P: '0.1',
        CPI_C: '0.5'
    }, {
        ReportingPeriod: 'Period4',
        CPI_P: '-0.5',
        CPI_C: '0.6'
    }, {
        ReportingPeriod: 'Period5',
        CPI_P: '-0.9',
        CPI_C: '0.8'
    }, {
        ReportingPeriod: 'Period6',
        CPI_P: '-1.0',
        CPI_C: '-0.6'
    }, {
        ReportingPeriod: 'Period7',
        CPI_P: '-1.1',
        CPI_C: '-0.7'
    }, {
        ReportingPeriod: 'Period8',
        CPI_P: '-1.5',
        CPI_C: '-0.8'
    }]
});

var chart = Ext.create('Ext.chart.Chart', {
    style: 'background:#fff',
    animate: true,
    theme: 'Category1',
    store: store1,
    width: 300,
    height: 300,
    renderTo: 'chart',
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['CPI_P', 'CPI_C'],
        title: 'CPI',
        grid: true
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['ReportingPeriod'],
        title: 'Reporting Period'
    }],
    series: [{
        type: 'column',
        axis: 'left',
        xField: 'ReportingPeriod',
        yField: 'CPI_P',
        markerConfig: {
            type: 'cross',
            size: 3
        }, 
        renderer: function(sprite, record, attr, index, store) {

                var value = (record.get('CPI_P') >> 2) % 2;
                var color = ['rgb(213, 70, 121)', 
                             'rgb(44, 153, 201)'
                             ][value];
                return Ext.apply(attr, {
                    fill: color
                });
            }
    }]
});

chart.show();

UPDATE

If I add a minimum to y-axis I get closer (sort of)

...
axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['CPI_P', 'CPI_C'],
        title: 'CPI',
        grid: true,
        minimum: 1,
    }....

It's the right idea, because the bars now are relevant to the number 1, but I obviously need to keep the bars on the graph.

Answer 1

What has seemed to work is subtracting 1 from my data and adding 1 to the labels.

axes: [{
            type: 'Numeric',
            position: 'left',
            grid: true,
            maximum: 1.0, //will render to 2.0
            fields: ['PeriodAmount', 'CumulativeAmount'],
            label:{
                renderer:function(v){
                    return (v+1).toFixed(2);
                }
            }         
        }...]

This is a viable work around for me, but I wouldn't consider this an elegant answer since it isn't very configurable for custom values. For example, changing this to -1 or 2 would require more work than just changing a simple setting.