I am trying to draw an chart inside panel. Chart bars are getting drawn

Question

0

Asked: June 2, 20262026-06-02T15:39:17+00:00 2026-06-02T15:39:17+00:00

I am trying to draw an chart inside panel. Chart bars are getting drawn

0

I am trying to draw an chart inside panel. Chart bars are getting drawn correctly but x and y axis labels are not shown when chart is drawn. Code to draw chart is as follows :

Ext.require([
    'Ext.form.*',
    'Ext.chart.*',
    'Ext.layout.container.*'
]);

Ext.define('ilp.view.EmployeeCountControl', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.employeeCountControl',

    require : [
        'ilp.store.Employees',
        'ilp.store.Dimensions'
    ],

    layout : {
        type : 'vbox',
        align : 'stretch',
        pack : 'start'
    },

    title : 'Select dimension to view chart',

    initComponent : function() {
        this.items = [
            {
                xtype : 'combobox',
                fieldLabel : 'Select Dimension',
                store : 'Dimensions',
                queryMode : 'local',
                displayField : 'name',
                valueField : 'dimension',
                flex : 1
            },
            {
                xtype : 'chart',
                title : 'selected dimension',
                store : 'Employees',
                flex : 2,
                width: 150,
                height: 200,
                legend : {
                    position : 'right'
                },
                axes : [
                    {
                        title : 'Emp Count',
                        type : 'Numeric',
                        position : 'left',
                        fields : ['hpCount', 'nonhpCount'],
                        minimum : 0,
                        grid : true
                    },
                    {
                        title : 'selected dimension',
                        type : 'Category',
                        position : 'bottom',
                        fields : ['dimension']
                    }
                ],
                series : [
                    {
                        type : 'bar',
                        column :true,
                        stacked : true,
                        highlight: true,
                        axis : 'left',
                        xField : ['dimension'],
                        yField : ['hpCount', 'nonhpCount'],
                        yPadding : 10
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});

and what gets drawn is as follows :

enter image description here

As you can see, title and axis values are not being displayed on chart.

Can anyone please tell me why this is happening??

Thanks in advance !!

EDIT 1

After moving legend to bottom, I got x axis values but now those values are getting hidden behind legend and also those values are going out of panel. Does anyone knows how to decrease the size of actual chart and bars to fit axis values properly? My chart now looks as follows :

enter image description here