0

tengo una grafica doughnut-chart en mi pagina, pero la linea de la circunferencia es muy ancha la quiero hacer mas delgada, para eso necesito saber como ampliar el radio, esta es mi mi grafica.

introducir la descripción de la imagen aquí

lo que quiero es que lo azul sea mas delgado.

Este es mi codigo en java script estoy utilizando la libreria chart.js:

    new Chart(document.getElementById("doughnut-chart"), {
      type: 'doughnut',
      data: {
        labels: ["Occupancy", "Other"],
        datasets: [
          {
            label: "Porcentaje",
            backgroundColor: ["#005289", "#FFFF"],
            data: [response['occ'],response['comp_occ']]
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Occupancy Report'
        }
      }
  }); 

2 respuestas 2

0

Puedes usar cutoutPercentage. Aqui puedes encontrar la documentacion: https://www.chartjs.org/docs/latest/charts/doughnut.html

0

Para ello, tienes que usar la propiedad pieHole donde le estableces un valor comprendido entre el 0 y el 1. Te adjunto la documentación donde aparece todas las opciones de propiedades que dispone el PieChart. Documentación Pie Chart Donut.

Te paso un ejemplo de cómo quedaría.

$(function(){
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.8
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.