[Chartjs]-Extjs with Devexpress ChartJS

Use the html property of the panel to render your div in the panel’s body. Create your chart in the afterrender event of the panel, so that the div is available. Finally, use the resize event to resize your div when the panel is resized.

See this other answer. The charting lib is different but the principles are exactly the same.

Edit

I can’t get to make the chart resize in height. Since I know nothing about the lib, I just refered to this support question… But I think it is the normal behaviour for the type of chart you’re using.

Anyway, here’s my code (also, in this fiddle):

Ext.define('DxChartPanel', {
    extend: 'Ext.Panel'

    ,resizable: true

    ,html: '<div class="chartContainer" style="width: 100%; height: 100%"></div>'

    ,initComponent: function() {
        this.callParent(arguments);
        this.on({
            scope: this
            ,resize: function(panel) {
                var ct = panel.body.down('.chartContainer'),
                    chart = $(ct.dom).dxChart('instance');

                ct.setSize(panel.body.getSize());

                chart._render({ animate: false })
                // Animated resize
                //chart._render();
            }
            ,afterrender: function(panel) {
                var el = this.body,
                    target = el.down('.chartContainer');
                target.setSize(el.getSize());
                this.createChart($(target.dom));
            }
        });
    }

    ,createChart: function(target) {
        var c = target.dxChart({
            size:{height:200,height:300},
            commonSeriesSettings: {
                label: {
                    visible: true
                }
            },
            series: [{
                data: [
                    { arg: 0, val: 1 },
                    { arg: 2, val: 4 },
                    { arg: 4, val: 2 }]
            }, {
                data: [
                    { arg: 1, val: 1 },
                    { arg: 2.5, val: 9 },
                    { arg: 3.7, val: 5.6 }]
            }]
        });
    }
});

Ext.create('DxChartPanel', {
    renderTo: Ext.getBody()
    ,title: "Resizable Panel"
    ,height: 300
    ,width: 300
});

Ext.widget('window', {
    autoShow: true
    ,title: "dxChart Window"
    ,width: 350
    ,height: 350
    ,layout: 'fit'
    ,items: [Ext.create('DxChartPanel', {
        border: false
    })]
});

There were only two things with rixo’s code which prevented resize to work properly:

Firstly, size of chart was set as constant (instead of being calculated based on container’s size)

I’ve removed line

size:{height:200,height:300}

UPDATE: there was a single issue with size, there is no need in timeout

Secondly, by some reason ExtJS fires “resize” event before actual resize (so container still has exactly the same size)

            setTimeout(function () {                            
                chart._render({ animate: false })
            })

Now it appears to be working and resizing properly

Reworked version of rixo’s fiddle is accessible here:
http://jsfiddle.net/kaatula/4sHkZ/1/

Code now looks like:

Ext.define('DxChartPanel', {
    extend: 'Ext.Panel'

    ,resizable: true

    ,html: '<div class="chartContainer" style="width: 100%; height: 100%"></div>'

    ,initComponent: function() {
        this.callParent(arguments);
        this.on({
            scope: this
            ,resize: function(panel) {

                var ct = panel.body.down('.chartContainer'),
                    chart = $(ct.dom).dxChart('instance');

                console.log($(ct.dom).height());
                ct.setSize(panel.body.getSize());

                setTimeout(function () {                            
                    chart._render({ animate: false })
                })
            }
            ,afterrender: function(panel) {
                var el = this.body,
                    target = el.down('.chartContainer');
                target.setSize(el.getSize());
                this.createChart($(target.dom));
            }
        });
    }

    ,createChart: function(target) {
        var c = target.dxChart({
            commonSeriesSettings: {
                label: {
                    visible: true
                }
            },
            series: [{
                data: [
                    { arg: 0, val: 1 },
                    { arg: 2, val: 4 },
                    { arg: 4, val: 2 }]
            }, {
                data: [
                    { arg: 1, val: 1 },
                    { arg: 2.5, val: 9 },
                    { arg: 3.7, val: 5.6 }]
            }]
        });
    },
    resize: function () {
        console.log(resize);
    }
});

Ext.create('DxChartPanel', {
    renderTo: Ext.getBody()
    ,title: "Resizable Panel"
    ,height: 300
    ,width: 300
});

Ext.widget('window', {
    autoShow: true
    ,title: "dxChart Window"
    ,width: 350
    ,height: 350
    ,layout: 'fit'
    ,items: [Ext.create('DxChartPanel', {
        border: false
    })]
});