2

Estoy haciendo una gráfica con chartjs :http://www.chartjs.org/docs/

El problema que tengo es que, en este caso tengo 3 columnas, y el valor de la menor es un 2 entonces la gráfica empieza en 2 en vez de en 0, por lo tanto una de las columnas no es visible... :

introducir la descripción de la imagen aquí

<script type="text/javascript">
    var ctx = document.getElementById("reporte_tecnicos").getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: [<?php while($count<$i){echo $data_n[$count]; $count++;} ?>],
    datasets: [{
        label: '',
        backgroundColor: [
            "rgba(0, 150, 254, 0.5)",
            "rgba(150, 100, 50, 0.5)",
            "rgba(50, 50, 50, 0.5)",
            "rgba(255, 100, 0, 0.5)",
            "rgba(150, 100, 50, 0.5)",
            "rgba(100, 254, 0.5)",
            "rgba(25, 100, 200, 0.5)",
            "rgba(75, 75, 75, 0.5)",
            "rgba(80, 20, 0, 0.5)",
            "rgba(255, 50, 254, 0.5)"
        ],
        data: [<?php while($count2<$i){echo $data_r[$count2]; $count2++;} ?>],
        options: {
        scales: {
            yAxes: [{
                beginAtZero: true
            }]
            }
        }
        }],
    }
    });
</script>

He visto en la documentación hay una opción que es beginAtZero pero no me funciona ni al ponerlo en yAxes ni en xAxes

Cómo puedo evitar esto?

2 respuestas 2

3

Chart.js te permite personalizar las gráficas pasando un objeto a la entrada options de la configuración de la gráfica. Este objeto puede almacenar muchas configuraciones, como para fuentes, tooltips, y ejes.

En tu caso, la configuración que debes personalizar es para el eje Y (yAxis), pasando un tick con la personalización de dicho eje.

He visto en la documentación hay una opción que es beginAtZero pero no me funciona ni al ponerlo en yAxes ni en xAxes

Eso es porque beginAtZero debe estar dentro de ticks:

var ctx = document.getElementById("reporte_tecnicos").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [<?php while($count<$i){echo $data_n[$count]; $count++;} ?>],
    datasets: [{
      label: '',
      backgroundColor: [
        "rgba(0, 150, 254, 0.5)",
        "rgba(150, 100, 50, 0.5)",
        "rgba(50, 50, 50, 0.5)",
        "rgba(255, 100, 0, 0.5)",
        "rgba(150, 100, 50, 0.5)",
        "rgba(100, 254, 0.5)",
        "rgba(25, 100, 200, 0.5)",
        "rgba(75, 75, 75, 0.5)",
        "rgba(80, 20, 0, 0.5)",
        "rgba(255, 50, 254, 0.5)"
      ],
      data: [<?php while($count2<$i){echo $data_r[$count2]; $count2++;} ?>],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

Nota: código válido para Chart.js 2.0 o superior. Para versión 1.x usar scaleOverride y scaleStartValue como lo indica la respuesta de @lois6b.

4
  • buena puntualizacion la de las versiones ^^
    – lois6b
    Commented el 16 feb. 2017 a las 13:05
  • Así es mi querido amigo ;)
    – gugadev
    Commented el 16 feb. 2017 a las 13:06
  • Tengo la versión 2.5 y aún copiando tal cual tu código no me ha funcionado. Sigue empezando en 2 en vez de 0... Y la consola no da ningún error.
    – Pavlo B.
    Commented el 16 feb. 2017 a las 14:39
  • @PavloB. cometí un pequeño error de typo. El objeto options no debe ir dentro de datasets, si no fuera. Mira éste ejemplo que hice en JSFiddle para que veas un ejemplo en vivo. He editado mi respuesta.
    – gugadev
    Commented el 16 feb. 2017 a las 14:51
1

Como dicen en esta respuesta tienes que sobreescribir scales:

Añadiendo:

scaleOverride : true,
scaleStartValue : 0,

<script type="text/javascript">
var ctx = document.getElementById("reporte_tecnicos").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
scaleOverride : true,
scaleStartValue : 0,
data: {
labels: [<?php while($count<$i){echo $data_n[$count]; $count++;} ?>],
datasets: [{
    label: '',
    backgroundColor: [
        "rgba(0, 150, 254, 0.5)",
        "rgba(150, 100, 50, 0.5)",
        "rgba(50, 50, 50, 0.5)",
        "rgba(255, 100, 0, 0.5)",
        "rgba(150, 100, 50, 0.5)",
        "rgba(100, 254, 0.5)",
        "rgba(25, 100, 200, 0.5)",
        "rgba(75, 75, 75, 0.5)",
        "rgba(80, 20, 0, 0.5)",
        "rgba(255, 50, 254, 0.5)"
    ],
    data: [<?php while($count2<$i){echo $data_r[$count2]; $count2++;} ?>],
    options: {
    scales: {
        yAxes: [{
            beginAtZero: true
        }]
        }
    }
    }],
}
});
</script>
2
  • Disculpa mi ignorancia, dónde quedaría eso dentro de mi código?
    – Pavlo B.
    Commented el 16 feb. 2017 a las 12:27
  • @PavloB. mira el edit
    – lois6b
    Commented el 16 feb. 2017 a las 12:31

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.