JSFiddle - React, Tailwind, and code Playground

by Yasser Sinjab

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.6/js/dx.chartjs.js"></script>
<div id="openchartContainer" style="max-width:800px;height: 400px;"></div>
<br/>
<br/>
<div id="2" style="max-width:800px;height: 400px;"></div>
<br/>
<br/>
<div id="3" style="max-width:800px;height: 400px;"></div>
<br/>
<br/>
<div id="4" style="max-width:800px;height: 400px;"></div>
<br/>
<br/>
<div id="5" style="max-width:800px;height: 400px;"></div>
<br/>
<br/>

JavaScript

var dataSource = [];
  $(document).ready(function () {

      $.ajax({
          url:"http://localhost:454/api/EmployeePerformance/25",
      }).done(function (data) {
          $.each(data, function (i, item) {
              dataSource.push(item);
          });

          $("#openchartContainer").dxChart({
              dataSource: dataSource,
              commonSeriesSettings: {
                  argumentField: "UserName",
                  type: "bar"
              },
              series: [{
                  valueField: "OpenOnTimeTasks",
                  name: "On Time"
              }, {
                  valueField: "OpenDelayedTasks",
                  name: "Delayed"
              }],
              legend: {
                  verticalAlignment: "bottom",
                  horizontalAlignment: "center"
                  
              },
              valueAxis: {
                  title: {
                      text: "totals"
                  },
                  position: "left"
              },
              title: "Open Tasks",
              tooltip: {
                  enabled: true,
                  customizeText: function () {
                      return this.seriesName + " : " + this.valueText;
                  }
              }
          });
          $("#2").dxChart({
              dataSource: dataSource,
              commonSeriesSettings: {
                  argumentField: "UserName",
                  type: "stackedBar"
              },
              series: [{
                  valueField: "ClosedOnTimeTasks",
                  name: "ClosedOnTimeTasks"
              }, {
                  valueField: "ClosedDelayedTasks",
                  name: "ClosedDelayedTasks"
              }],
              legend: {
                  verticalAlignment: "bottom",
                  horizontalAlignment: "center",
                  itemTextPosition: 'top'
              },
              valueAxis: {
                  title: {
                     ...