JSFiddle - React, Tailwind, and code Playground

by Abhishek Garg

HTML

<script src="https://extjs-public.googlecode.com/svn/tags/extjs-4.1.1a/include/ext-all.js"></script>

JavaScript

Ext.onReady(function() {
    
            var data = [{ 'lineX': 0, 'lineY': 30, 'areaX': 0, 'greenY': 5, 'yellowY': 10, 'redY': 100 }, // data1 = 115 - (data4 +  data5)
                    {'lineX': 25, 'lineY': 10, 'areaX': null, 'greenY': null, 'yellowY': null, 'redY': null },
                    { 'lineX': 33, 'lineY': 15, 'areaX': null, 'greenY': null, 'yellowY': null, 'redY': null },
                    { 'lineX': 100, 'lineY': 20, 'areaX': 100, 'greenY': 95, 'yellowY': 100, 'redY': 100}];
            var store = new Ext.data.ArrayStore({
                fields: ['areaX', 'redY', 'yellowY', 'greenY', 'lineX', 'lineY']
            });
            store.loadData(data);
 
  Ext.create('Ext.chart.Chart', {
     renderTo: Ext.getBody(),
     width: 470,
     height: 300,
        store: store,
	 axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    minorTickSteps: 0,
                    maximum: 150,
                    position: 'left',
                    fields: ['lineY', 'greenY', 'yellowY', 'redY'],
                    title: 'Buffer Penetration'

                }, {
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['lineX', 'areaX'],
                    title: 'Critical Chain Comp'
                }],
     series: [
                {
                    type: 'area',
                    axis: 'left',
                    xField: 'areaX',
                    yField: ['redY']

                },

                 {
                     type: 'area',
                     axis: 'left',
                     xField: 'areaX',
                     yField: ['yellowY']

                 },
                 {
                     type: 'area',
                     axis: 'left',
                     xField: 'areaX',
                     yField: ['greenY']

                 },

                {
                    type: 'line',
                    axis: 'left',
         ...