JSFiddle - React, Tailwind, and code Playground

by adamrehman

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

// This works in IE 
var dataThatWorksInIE11 = [{"period":"30 Jun 18","petrol":134,"diesel":32},{"period":"30 Sep 18","petrol":104,"diesel":24},{"period":"31 Dec 17","petrol":164,"diesel":40},{"period":"31 Dec 18","petrol":74,"diesel":16},{"period":"31 Mar 18","petrol":104,"diesel":24}];


// this causes out of memory exception in IE
var dataThatDOESNTWorkInIE11 = [{"period":"30-06-2018","petrol":134,"diesel":32},{"period":"30-09-2018","petrol":104,"diesel":24},{"period":"31-03-2018","petrol":104,"diesel":24},{"period":"31-12-2017","petrol":164,"diesel":40},{"period":"31-12-2018","petrol":74,"diesel":16}];

// this causes out of memory exception in IE and Chrome
var otherDataThatDOESNTWorksInIE11 = [{"period":"03/31/2018","petrol":104,"diesel":24},{"period":"06/30/2018","petrol":134,"diesel":32},{"period":"09/30/2018","petrol":104,"diesel":24},{"period":"12/31/2017","petrol":164,"diesel":40},{"period":"12/31/2018","petrol":74,"diesel":16}];

// prepare jqxChart settings
var settings = {
  title: "Faulty chart",
  description: "example of Faulty chart",
  enableAnimations: true,
  showLegend: true,
  padding: { left: 5, top: 5, right: 5, bottom: 5 },
  titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
  source: otherDataThatDOESNTWorksInIE11,
  colorScheme: "scheme01",
  xAxis: {
    dataField: "period",
    unitInterval: 1,
    flip: false,
    valuesOnTicks: true,
    tickMarks: {
      visible: true,
      unitInterval: 1,
      color: "#888888"
    },
    gridLines: {
      visible: false,
    },
    labels: {
      angle: -90,
    }
  },
  valueAxis: {
    unitInterval: 10,
    minValue: 0,
    maxValue: 150,
    visible: true,
    title: { text: "ammount<br>" },
    gridLines: { color: "#888888" }
  },
  seriesGroups: [
    {
      type: "stackedcolumn",
      columnsGapPercent: 100,
      seriesGapPercent: 5,
      series: [
        { dataField: "petrol", displayText: "petrol", color: "#BA3C38" },
        { dataField: "diesel", displayText:...