JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es5/jquery.flot.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.flot.pie.min.js"></script>
<div class="container">
  <div id="flotbar" class="flot-graph"></div>
</div>

<div class="container">
<div id="flotpie" class="flot-graph">

</div>
</div>

CSS

.container{
  display:flex;
  align-items:center;
  margin:2rem;
  min-height:350px;
  border:1px solid lightgray;
  padding:0.25rem;
}

.flot-graph { width: 100%; height:300px; min-height:300px; max-height:400px; }

.legendLayer .background {
fill: rgba(255, 255, 255, 0.85);
stroke: rgba(0, 0, 0, 0.85);
stroke-width: 1;
}

JavaScript

var chartColors = [

  "#03A0FA", //blue
  "#78CD51", //green
  "#fa603d", //orange
  "#f3e50a", // Yellow
  "#E84C8A", // Pink
  "#6ecfff", // lightBlue
  "#FABB3D", // lightOrange
  "#ff7aaf", // lightPink
  "#cc02ff", // purple
  "#ff5454"
];

var pieData = [{
    label: "Asia",
    data: 4119630000,
    color: "#005CDE"
  },
  {
    label: "Latin America",
    data: 590950000,
    color: "#00A36A"
  },
  {
    label: "Africa",
    data: 1012960000,
    color: "#7D0096"
  },
  {
    label: "Oceania",
    data: 35100000,
    color: "#992B00"
  },
  {
    label: "Europe",
    data: 727080000,
    color: "#DE000F"
  },
  {
    label: "North America",
    data: 344120000,
    color: "#ED7B00"
  }
];

var pieOptions = {
legend: {
      show: true,
     
    },
  series: {    
    pie: {
      show: true,      

      label: {
        show: true,
        radius: 0.8,
        formatter: function(label, series) {
          return '<div style="border:1px solid grey;font-size:8pt;text-align:center;padding:5px;color:white;">' +
            label + ' : ' +
            Math.round(series.percent) +
            '%</div>';
        },
        background: {
          opacity: 0.8,
          color: '#000'
        }
      }
    }
  }

};


var barOptions = {
  grid: {
    hoverable: true,
  },
  series: {
    bars: {
      show: true,
      barWidth: 0.6,
      align: "center",
      fill: 0.8
    }
  },
  yaxis: {
    min: 0,
    tickSize: 1
  },
  xaxis: {
    mode: "categories",
    ticks: [
      [0, 'True'],
      [1, 'False'],
      [2, 'True'],
      [3, 'False']
    ],
    tickLength: 0
  },
  tooltip: true,
  tooltipOpts: {
    content: '%y Votes',
    defaultTheme: false
  },
  colors: chartColors
};
var barData = [
  [
    [0, 3]
  ],
  [
    [1, 9]
  ]
];




$.plot($('#flotpie'), pieData, pieOptions);

$.plot($('#flotbar'), barData, barOptions);