JSFiddle - React, Tailwind, and code Playground

by Florian Gropp

HTML

<script src="angular-chart.min.js"></script>
<title>
  AngularJS Plunker</title>
<script>
  document.write('<base href="' + document.location + '" />');

</script>
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="angular-chart.min.js"></script>
<script src="app.js"></script>


<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <select ng-change="changeChartType(selectedType)" ng-model="selectedType">
            <option ng-repeat="t in chartType" value={{t.type}}>{{t.dispName}}</option>
      </select>
  <p>{{selectedType}}</p>

  <canvas id="bar" class="chart-base" chart-type="selectedType" chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</body>

JavaScript

var app = angular.module('plunker', ['chart.js']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.chartType = [{
    type: "doughnut",
    dispName: "DOUGHNUT"
  }, {
    type: "pie",
    dispName: "PIE"
  }, {
    type: "radar",
    dispName: "RADAR"
  }, {
    type: "bar",
    dispName: "Bar"
  }, {
    type: "line",
    dispName: "LINE"
  }];

  $scope.selectedType = $scope.chartType[0].type;
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});