Extjs chart rendering issue

Question

Here is my code: https://fiddle.sencha.com/#fiddle/15ef, I want to achieve the same design results like it is here http://dev.sencha.com/extjs/5.1.0/examples/charts-kitchensink/#marked-line As you see my code is rendering completely different chart despite the code is similar. Please help! Thanks in advance.

Answer 1

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
                storeId: "chartData",
                fields: ['question', 'interviewer', 'employee' ],
                data: [
                    ["erti",6,7],
                    ["ori",7,4],
                    ["sami",3,6],
                        ["otxi",1,9],
                        ["xuti",6,8],
                    ["eqvsi",6,4],
                    ["shvidi",7,3],
                    ["rva",3,2]
                ]
            });
Ext.create({
                xtype: 'chart',
                width: '100%',
                height: 410,
                padding: '10 0 0 0',
                renderTo: document.body,
                animate: true,
                shadow: true,
                style: 'background: #fff;',
                legend: {
                    docked: 'right',
                    border: 0,
                    margin: 0,
                    labelFont: '12px Helvetica'
                },
                store: chartDataStore,
                insetPadding: 40,
                axes: [{
                    type: 'numeric',
                    fields: ['interviewer', 'employee' ],
                    position: 'left',
                    maximum:9,
                    grid: true,
                    minimum: 0,
                    minorTickSteps: 1
                }, {
                    type: 'category',
                    fields: 'question',
                    position: 'bottom',
                    grid: true,
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }
                }],
                series: [{
                    type: "line",
                    axis: "left",
                    xField: "question",
                    yField: "interviewer",
                    title: "Interviewer",
                    marker: true,
                    style: {
                        'stroke-width': 4
                    },
                    markerConfig: {
                        type: 'circle',
                        radius: 4,
                        fill: '#fff'
                    },
                    highlight: {
                        fill: '#000',
                        radius: 5,
                        'stroke-width': 2,
                        stroke: '#fff'
                    },
                    tips:{
                        trackMouse: true,
                        style: 'background: #FFF',
                        height: 20,
                        renderer: function(storeItem, item) {
                            var title = item.series.title;
                            this.setTitle(title + ' for ' + storeItem.get('employee') + ': ' + storeItem.get('interviewer') + storeItem.get('question'));
                        }

                    }

                }, {
                    type: "line",
                    axis: "left",
                    xField: "question",
                    yField: "employee",
                    title: "Employee",
                    marker: true,
                    style: {
                        'stroke-width': 4
                    },
                    markerConfig: {
                        type: 'circle',
                        radius: 4,
                        fill: '#fff'
                    },
                    highlight: {
                        fill: '#000',
                        radius: 5,
                        'stroke-width': 2,
                        stroke: '#fff'
                    },
                    tips: {
                        trackMouse: true,
                        style: 'background: #FFF',
                        height: 20,
                        renderer: function(storeItem, item) {
                            var title = item.series.title;
                            this.setTitle(title + ' for ' + storeItem.get('employee') + ': ' + storeItem.get('interviewer') + storeItem.get('question'));
                        }

                    }

                }]

            });

You're using extjs on newest version, the example is on extjs 4, charts are changed, use these docs http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/ So many configs are newest than extjs 4, use Always related docs to set existing configs and not deprecated ones. vote up if correct please