JSFiddle - React, Tailwind, and code Playground

by FancyGrid Inc.

HTML

<script src="https://fancygrid.com/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style=""></div>

CSS

.fancy-spark-hbar.fancy-spark-stacked {
  margin-top: 4px !important;
}

.column-country .fancy-grid-cell-inner {
  font-weight: bold;
}

JavaScript

const data = [
  { country: 'Finland', data: [16.2, 22.7, 10.3, 7.76, 12.2]},
  { country: 'Denmark', data: [11.9, 22.7, 10.9, 4.29, 15.5]},
  { country: 'Netherlands', data: [11.8, 7.54, 15.4, 4.17, 14.9]},
  { country: 'Sweden', data: [13.1, 13.2, 9.41, 3.66, 14.3]},
  { country: 'Slovenia', data: [5.86, 22.7, 6.87, 6.5, 11.0]},
  { country: 'Belgium', data: [7.39, 6.2, 8.7, 7.28, 16.7]},
  { country: 'Spain', data: [5.18, 9.99, 9.75, 8.70, 11.7]},
  { country: 'Lithuaania', data: [5.02, 9.77, 7.59, 8.51, 13.4]},
  { country: 'Portugal', data: [4.48, 7.6, 6.74, 10.7, 14.6]},
  { country: 'Ireland', data: [9.67, 6.17, 14.4, 5.38, 8.36]},
  { country: 'Austria', data: [3.96, 9.97, 7.51, 7.52, 13.7]},
  { country: 'Germany', data: [3.74, 6.26, 7.04, 5.28, 18.8]},
  { country: 'Italy', data: [4.6, 12.1, 6.24, 6.17, 12.0]},
  { country: 'Cyprus', data: [3.46, 2.41, 13.9, 4.17, 14.3]},
  { country: 'Malta', data: [5.78, 3.59, 10.7, 8.25, 9.85]},
  { country: 'European Union 28', data: [5.39, 7.09, 8.15, 5.13, 11.9]},
  { country: 'Luxembourg', data: [4.88, 4.35, 7.65, 6.49, 12.9]},
  { country: 'UK', data: [8.95, 2.06, 16.0, 2.1, 5.57]},
  { country: 'France', data: [4.73, 5.94, 5.76, 3.61, 13.1]},
  { country: 'Croatia', data: [6.28, 3.98, 5.89, 6.26, 9.56]},
  { country: 'Bulgaria', data: [1.89, 4.08, 3.77, 12.3, 8.31]},
  { country: 'Slovakia', data: [4.77, 3.82, 5.89, 6.26, 9.56]},
  { country: 'Estonia', data: [6.6, 7.40, 4.82, 3.55, 7.42]},
  { country: 'Greece', data: [2.22, 1.10, 7.96, 3.41, 12.2]},
  { country: 'Czech Republic', data: [3.96, 5.15, 4.78, 1.69, 10.1]},
  { country: 'Latvia', data: [2.31, 7.55, 4.53, 3.73, 5.29]},
  { country: 'Hungary', data: [3.19, 3.22, 5.35, 5.14, 5.34]},
  { country: 'Romania', data: [2.1, 3.46, 3.35, 5.35, 7.33]},
  { country: 'Poland', data: [2.09, 5.14, 3.61, 3.73, 6.95]}
];

Fancy.COLORS = ['#FF7F00', '#984EA3', '#4DAF4A', '#E41A1C', '#63b8ff'];

$(() => {

  new FancyGrid({
    renderTo: 'container',
    theme:...