JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://app.bodylyze.sk/assets/plugins/apexcharts/apexcharts.min.js"></script>
<div class="card card1">
  <div class="card-header">
    <h3 class="card-title">Pie chart 1</h3>
  </div>
  <div class="card-body">
    <div id="pie1" class="chart"></div>
  </div>
</div>

<div class="card card2">
  <div class="card-header">
    <h3 class="card-title">Pie chart 2</h3>
  </div>
  <div class="card-body">
    <div id="pie2" class="chart"></div>
  </div>
</div>
<!--
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Pie chart 2 - modal</h3>
  </div>
  <div class="card-body">
    <button class="btn btn-primary btn-block" data-toggle="modal" data-target="#modal1">Open modal</button>
  </div>
</div>
-->
<div id="modal1" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pie chart 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="pie2" class="chart"></div>
      </div>
    </div>
  </div>
</div>

CSS

body { padding: 20px; }
.card { margin-bottom: 30px; }
.card1 { width: 200px; }
.card2 { width: 400px; }
.chart {
  margin: 0 auto;
  /*width: 160px;*/
}
.chart.mounted {
  background-color: #CCCCFF;
}

JavaScript

$(function() {
  {
  "series": [],
  "chart": {
    "type": "donut"
  },
  "labels": [],
  "responsive": [
    {
      "breakpoint": 480,
      "options": {
        "chart": {
          "width": 200
        },
        "legend": {
          "position": "bottom"
        }
      }
    }
  ],
  "yaxis": [
    {
      "show": true,
      "showAlways": false,
      "showForNullSeries": true,
      "opposite": false,
      "reversed": false,
      "logarithmic": false,
      "forceNiceScale": false,
      "floating": false,
      "labels": {
        "show": true,
        "minWidth": 0,
        "maxWidth": 160,
        "offsetX": 0,
        "offsetY": 0,
        "rotate": 0,
        "padding": 20,
        "style": {
          "colors": [],
          "fontSize": "11px",
          "fontWeight": 400,
          "cssClass": ""
        }
      },
      "axisBorder": {
        "show": false,
        "color": "#e0e0e0",
        "width": 1,
        "offsetX": 0,
        "offsetY": 0
      },
      "axisTicks": {
        "show": false,
        "color": "#e0e0e0",
        "width": 6,
        "offsetX": 0,
        "offsetY": 0
      },
      "title": {
        "rotate": 90,
        "offsetY": 0,
        "offsetX": 0,
        "style": {
          "fontSize": "11px",
          "fontWeight": 900,
          "cssClass": ""
        }
      },
      "tooltip": {
        "enabled": false,
        "offsetX": 0
      },
      "crosshairs": {
        "show": true,
        "position": "front",
        "stroke": {
          "color": "#b6b6b6",
          "width": 1,
          "dashArray": 0
        }
      }
    }
  ],
  "annotations": {
    "yaxis": [],
    "xaxis": [],
    "points": []
  },
  "xaxis": {
    "convertedCatToNumeric": false
  }
}
}