I'm creating a line chart using ExtJs, and I would like to have 24 hour x-axis. However, I found an issue with duplicate x hours. I set formatter to show only 24 hours:
Code:
groupBy: 'h'
like this:
Code:
  Ext.create('Ext.panel.Panel', {
            width: 800,
            height: 400,
            title: 'CPU %',
            border: 1,
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: [{
                xtype: 'cartesian',
                store: s,
                interactions: [{
                        type: 'crosszoom'


                    }


                ],
                legend: {
                    docked: 'right'
                },


                axes: [{
                    type: 'numeric',
                    position: 'left',
                    fields: ['value'],


                }, {
                    type: 'time',
                    grid: true,
                    dateFormat: 'h',
                    groupBy: 'h',
                    fields: ['timestamp'],
                    position: 'bottom',
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }


                }],
                series: [{
                    type: 'line',
                    axis: 'left',
                    title: 'value',
                    xField: 'timestamp',
                    yField: 'value',
                    smooth: true,


                    marker: {
                        type: 'square',
                        fx: {
                            duration: 200,
                            easing: 'backOut'
                        }
                    },
                    highlightCfg: {
                        scaling: 2
                    }
                }]
            }]


        })
Here is my live example: https://fiddle.sencha.com/#view/editor&fiddle/2ulv
What am I doing wrong?
Thanks in advance