JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="my-button">
  <select id="chart-type">
    <option value="pie">pie</option>
    <option value="bar">bar</option>
    <option value="line">line</option>
  </select>
</div>
<div class="blocks" id='container'>
</div>

<div class="button" id="addChart">
  Add another box
</div>
<div class="button" id="removeChart">
  Remove last box
</div>

CSS

.blocks {
  width: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-shadow: 1px 0 0 0 #888, 0 1px 0 0 #888, 1px 1px 0 0 #888, /* Just to fix the corner */
  1px 0 0 0 #888 inset, 0 1px 0 0 #888 inset;
}

.chart {
  height: 400px;
  width: 400px;
  padding-left: 1px;
  padding-top: 1px;
  box-sizing: border-box;
  box-shadow: 1px 0 0 0 #888, 0 1px 0 0 #888, 1px 1px 0 0 #888, /* Just to fix the corner */
  1px 0 0 0 #888 inset, 0 1px 0 0 #888 inset;
}

.button {
  width: 100px;
  border: 1px solid black;
  margin: 20px;
  padding: 0.5em;
  border-radius: 5px;
}

JavaScript

function str(s) {
  return JSON.stringify(s).replace(/"/g, "'");
}

$("#addChart").click(function() {
  var e = document.getElementById("chart-type");
  var title = "Points scored";
  var chartType = e.options[e.selectedIndex].value;
  var categories = ['Team 1', 'Team 2', 'Team 3', 'Team 4'];
  var series = [{
    name: 'Period 1',
    data: [25, 37, 12, 40]
  }, {
    name: 'Period 2',
    data: [85, 23, 35, 65]
  }];
  var template = "<chart type=\"" + chartType + 
  	"\" title=\"" + title + 
  	"\" :data-set=\"{categories: " + str(categories) + 
  	", series: " + str(series) + " }\"></chart>";
  var element = $(template).appendTo("#container");
  var chart = new Vue({
    el: element[0]
  });
});

Vue.component('chart', {
  props: ['type', 'title', 'dataSet'],
  template: '<div class=\"chart shadow-border\"></div>',
  mounted() {
    if (this.type === "pie") {
      // change dataSet.series to fit "pie" chart series
      var mySeries = [{}];
      mySeries[0].name = "Score";
      mySeries[0].data = [];
      var data = mySeries[0].data;
      for (var i = 0; i < this.dataSet.series[0].data.length; i++) {
        var item = {
          name: (this.dataSet.categories[i]) ? (this.dataSet.categories[i]) : (""),
          y: this.dataSet.series[0].data[i]
        };
        data.push(item);
      }
      this.dataSet.series = mySeries;
    }
    Highcharts.chart(this.$el, {
      chart: {
        type: this.type,
        width: this.$el.offsetWidth - 1
      },
      title: {
        text: this.title,
      },
      plotOptions: {
        pie: {
          dataLabels: {
            distance: -50,
            formatter: function() {
              return this.y + '%';
            }
          },
          showInLegend: true
        }
      },
      xAxis: {
        categories: this.dataSet.categories
      },
      series: this.dataSet.series
    });
  }
});