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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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