JSFiddle - React, Tailwind, and code Playground

by molecule

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

generateData = function(n, floor){
    var data = [],
        p = (Math.random() *  11) + 1,
        i;

    floor = (!floor && floor !== 0)? 20 : floor;

    for (i = 0; i < (n || 12); i++) {
        data.push({
            name: Ext.Date.monthNames[i % 12],
            data1: Math.floor(Math.max((Math.random() * 100), floor)),
            data2: Math.floor(Math.max((Math.random() * 100), floor)),
            data3: Math.floor(Math.max((Math.random() * 100), floor)),

        });
    }
    return data;
};



store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3'],
    data: generateData()
});

Ext.define("Ext.app.myGauge", {
    extend: "Ext.form.Panel",

    title: 'Gauge Charts',
    // width: 400,
    height: 200,
    //minWidth: 650,
    //minHeight: 225,
    padding: ' 5 5 5 5',
    closable: true,
    collapsible: true,
    animCollapse: true,
    draggable: true,
    resizable: true,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'chart',

        //title : 'title 1',
        style: 'background:#fff',
        theme: 'Category3',
        //legend :{position: 'bottom',  visible : true},

        animate: {
            easing: 'elasticIn',
            duration: 1000
        },
        store: store1,
        insetPadding: 25,
        flex: 1,
        axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 7//-10
        }],
        series: [{
            type: 'gauge',
            field: 'data1',
            donut: false, //showInSeries : true,
            colorSet: ['#F49D10', '#ddd']
        }]


     }]
});

var panel = Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    id: 'tab1',
    items: [
        {title: 'first tab', html: 'dkjgkdkgjk'},
        Ext.create('Ext.app.myGauge')
        ]
});


Ext.getCmp('tab1').on('tabchange', function (me, newCard,...