JSFiddle - React, Tailwind, and code Playground

by SeiryuV

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
   Menu
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" id="export-png" href="#">Download PNG</a></li>
    <li><a class="dropdown-item" id="export-jpeg" href="#">Download JPEG</a></li>
  </ul>
</div>

<figure class="highcharts-figure">
  <div id="container"></div>
  <div id="container2"></div>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

JavaScript

Highcharts.getSVG = function(charts) {
  let top = 0;
  let width = 0;

  const groups = charts.map(chart => {
    let svg = chart.getSVG();
    // Get width/height of SVG for export
    const svgWidth = +svg.match(
      /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
    )[1];
    const svgHeight = +svg.match(
      /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
    )[1];

    svg = svg
      .replace(
        '<svg',
        '<g transform="translate(0,' + top + ')" '
      )
      .replace('</svg>', '</g>');

    top += svgHeight;
    width = Math.max(width, svgWidth);

    return svg;
  }).join('');

  return `<svg height="${top}" width="${width}" version="1.1"
        xmlns="http://www.w3.org/2000/svg">
            ${groups}
        </svg>`;
};

Highcharts.exportCharts = function(charts, options) {

  // Merge the options
  options = Highcharts.merge(Highcharts.getOptions().exporting, options);

  // Post to export server
  Highcharts.post(options.url, {
    filename: options.filename || 'chart',
    type: options.type,
    width: options.width,
    svg: Highcharts.getSVG(charts)
  });
};

var chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie'
  },
  title: '',
  subtitle: {
    text: 'Test Subtitles',
    align: 'center',
    verticalAlign: 'bottom'
  },
  navigation: {
    buttonOptions: {
      enabled: false
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});
var chart2 = new Highcharts.Chart({
  chart: {
    renderTo: 'container2',
    type: 'pie'
  },
  title: '',
  subtitle: {
    text: 'Test Subtitles number 2',
    align: 'center',
    verticalAlign: 'bottom'
  },
  navigation: {
    buttonOptions: {
      enabled: false
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
 ...