Create a pie chart with html and Angularjs

Question

I would like to know how to create a chart (ex: pizza) from the data of an array with html and Angularjs. An example would help a lot. Thank you very much.

Answer 1

You can use the library Angular Chart to do what you want. I put a simple example.

(function() {
  'use strict';

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

  angular
    .module('app')
    .controller('GraficoController', GraficoController);

  GraficoController.$inject = [];

  function GraficoController() {
    var vm = this;

    vm.grafico = {};
    vm.grafico.descricoes = ['Carros', 'Motos', 'Lanchas'];
    vm.grafico.valores = [3, 1, 8];
  }
})();

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.js"></script>

<div ng-app="app">
  <div ng-controller="GraficoController as vm" style="height: 50%; width: 50%">
    <canvas id="pie" class="chart chart-pie" chart-data="vm.grafico.valores" chart-labels="vm.grafico.descricoes">
    </canvas>
  </div>
</div>

There are other cited libraries in this Soen response (How can i make bar & pie Charts in angular js):

1. Angular Charts using D3;
2. Angular-nvD3;
3. You can use the Google Charts together with Angularjs.