0

Tengo el siguiente código

    var ctx = document.getElementById('myChart').getContext("2d");
    var chart = new Chart(ctx, {

      type: 'horizontalBar',

      data: {
        labels:['uno','dos','tres','cuatro','cinco','seis','siete','ocho','nueve','diez'],
        datasets: [{
            label: "Resultado",
            backgroundColor: 'lightblue',
            data: [3, 6, 4, 4, 3, 6, 5, 4, 6, 2],
          },
          {
            label: "Perfil",
            backgroundColor: "lightpink",
            data: [2, 3, 4, 6, 7, 5, 4, 3, 8, 2]
          }

        ]
      },
      options: {
        scales: {
          xAxes: [{
            autoSkip: false,

            ticks: {
              suggestedMin: 0,
              suggestedMax: 11,
              autoSkip: false

            }
          }]
        }
      }

    });
   
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

Pero hay errores con lo que paso en options :

suggestedMin: 0 : Esto sólo funciona si elimino suggestedMax: 11,

suggestedMax: 11: esto sólo funciona si elimino suggestedMin: 0

autoSkip:false: Esto sólo funciona cuando uno de los dos anteriores no está.

¿Cómo puedo solucionarlo?

2
  • Hola Emiliano, la variable "maxChart" donde la declaras? ¿Que errores te muestra? Commented el 27 sept. 2018 a las 0:55
  • @Ricardo no me muestra ningún error, sólo no cumple esas tres opciones a la vez, la variable maxChart en ese caso es 11, ya lo modifiqué para que no halla confuciones Commented el 27 sept. 2018 a las 0:58

1 respuesta 1

0

Según mi experiencia es porque suggestedMin y suggestedMax van en ticks de yAxes. Ya que es ahí donde estás delimitando. Así lo utilizo yo.

    scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Producto'
                    },
                    ticks: {
                        fontSize: 10,
                        autoSkip: false,
                        beginAtZero: false
                    }

                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Cantidad'
                    },
                    ticks: {
                        beginAtZero: false,
                        suggestedMax: 10,
                        stepSize: 0,
                        scaleSteps: 10,
                        autoSkip: true,
                        maxTicksLimit: 20,
                    }
                }]
            }

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.