Saltar al contenido

chartjs: cómo configurar una escala personalizada en un gráfico de barras

Solución:

También incluir scaleStartValue y scaleStepWidth como se indica en los documentos.

Ejemplo

Este ejemplo crea un gráfico de barras con el eje Y que comienza en 0 y termina en 900. Para ello, el ancho de paso se establece en 100 y el número de pasos en 9.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
    <body>
      <canvas id="income" width="600" height="400"></canvas>
    </body>
</html>

JS

var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }

    ]
};

var income = document.getElementById("income").getContext("2d");

new Chart(income).Bar(barData, {
  animation:false,
  scaleOverride:true,
  scaleSteps:9,
  scaleStartValue:0,
  scaleStepWidth:100
});

var myChart = new Chart(ctx, {
                type: 'bar',
                data:data,
                options: {
                    responsive: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 6,
                                max: 60 //max value for the chart is 60
                                }
                            }
                        }]
                    }
                }
            });
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *