JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<html ng-app="myapp">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
  <body>

    <div ng-controller="chartContainerController">
      <chart-Container ng-repeat="chartContainer in chartContainers" chart-container-data="chartContainer" />
    </div>
    
  </body>
</html>

JavaScript

angular.module('myapp', [])
  .controller('chartContainerController', ['$scope', function($scope) {
    $scope.chartContainers = [
      { id: 'chartContainer1' },
      { id: 'chartContainer2' },
      { id: 'chartContainer3' },
      { id: 'chartContainer4' }];
  }])
  .directive('chartContainer', function() {
  return {
    restrict: 'E', // Element directive
    scope: { chartContainer: '=chartContainerData' },
    template: '<div id = {{chartContainer.id}} style="height: 280px; width: 100%;"></div>'
  };
});

window.onload = function(){
  var chart1 = new CanvasJS.Chart("chartContainer1", {
    theme:"light2",
    title: {
    	text: "Column Chart"
    },
    data: [
      {
        type: "column",
        dataPoints: [
          { x: 10, y: 71 },
          { x: 20, y: 55 },
          { x: 30, y: 50 },
          { x: 40, y: 65 },
          { x: 50, y: 95 },
          { x: 60, y: 68 },
          { x: 70, y: 28 },
          { x: 80, y: 34 },
          { x: 90, y: 14 }
        ]
      }					
    ]
  });


  chart1.render();

  var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme:"light2",
    title: {
    	text: "Spline Area Chart"
    },
    data: [
      {
        type: "splineArea",
        dataPoints: [
          { x: 10, y: 71 },
          { x: 20, y: 55 },
          { x: 30, y: 50 },
          { x: 40, y: 65 },
          { x: 50, y: 95 },
          { x: 60, y: 68 },
          { x: 70, y: 28 },
          { x: 80, y: 34 },
          { x: 90, y: 14 }
        ]
      }					
    ]
  });


  chart2.render();

  var chart3 = new CanvasJS.Chart("chartContainer3", {
    theme:"light2",
    title: {
    	text: "Line Chart"
    },
    data: [
      {
        type: "line",
        dataPoints: [
          { x: 10, y: 71 },
          { x: 20, y: 55 },
          { x: 30, y: 50 },
          { x: 40, y: 65 },
          { x: 50, y: 95 },
          { x: 60, y: 68 },
          { x: 70, y: 28 },
          { x: 80, y: 34 },
          { x: 90, y: 14 }
        ]
     ...