JSFiddle - React, Tailwind, and code Playground

by Manuel Gertrudix

HTML

<html>
  <head>
    <!--Cargamos la API AJAX-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

    </script>
  </head>

  <body>
    <!-Incluimos el Div en el que se ubicará el chart-->
    <div id="chart_div"></div>
  </body>
</html>

JavaScript

// Cargamos la API de visualización del paquete que nos interesa, en este caso "corechart"
      google.charts.load('current', {'packages':['corechart']});

      // Establecemos el callback para que se ejecute la función cuando se haya cargado la API de visualización de Google y no antes
      google.charts.setOnLoadCallback(drawChart);

      // La devolución de llamada que crea y rellena una tabla de datos, 
      // crea una instancia del gráfico circular, pasa los datos y los dibuja.
      function drawChart() {

        // Creamos la tabla de datos
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Partido');
        data.addColumn('number', 'Escaños');
        data.addRows([
          ['PP', 137],
          ['PSOE', 85],
          ['UPodemos', 71],
          ['CS', 32],
          ['ERC-CATSI', 9],
          ['CDC', 8],
          ['PNV', 5],
          ['EH-Bildu', 2],
          ['CCa-PNC', 1]
        ]);

        // Configuramos las opciones del chart
        var options = {
          title: 'Reparto de escaños',
          legend: 'none',
          width: 650,
          height: 550,
     			colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
          is3D: true,
          pieSliceText: 'label',
          slices: {  0: {offset: 0.1},
                     1: {offset: 0.0},
                     3: {offset: 0.0},
                     4: {offset: 0.0}
          }
        };

        // Instanciamos y dibujamos el chart pasándole la configuración de las opciones
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }