chart.js - horizontal - yaxes chartjs




Cómo establecer el valor máximo y mínimo para el eje Y (11)

Estoy usando un gráfico de líneas de http://www.chartjs.org/

Como puede ver, el valor máximo (130) y el valor mínimo (60) para el eje Y se eligen automáticamente, quiero un valor máximo = 500 y un valor mínimo = 0. es posible?


ChartJS v2.4.0

Como se muestra en los ejemplos en https://github.com/jtblin/angular-chart.js el 7 de febrero de 2017 (ya que esto parece estar sujeto a cambios frecuentes):

var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

Esto dará como resultado 5 valores del eje y como tales:

100
80
60
40
20
0

Como ninguna de las sugerencias anteriores me ayudó con chart.js 2.1.4, lo resolví agregando el valor 0 a mi matriz de conjunto de datos (pero sin etiqueta adicional):

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]


En mi caso, utilicé una devolución de llamada en tics yaxis, mis valores están en porcentaje y cuando alcanza el 100% no muestra el punto, usé esto:

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

Y funcionó bien.


Escribiendo esto en 2016, mientras que Chart js 2.3.0 es el último. Así es como se puede cambiar

              var options = {
                    scales: {
                       yAxes: [{
                                display: true,
                                stacked: true,
                                ticks: {
                                    min: 0, // minimum value
                                    max: 10 // maximum value
                                }
                       }]
                    }
               };

Estaba usando una versión anterior de la plantilla Flat Lab en varios proyectos míos que usaban v1.x de chart.js, de los cuales no estoy seguro, no pude actualizar a v2.x ya que tenía varios proyectos trabajando con él . Lo mencionado anteriormente (bardata,options) no funcionaba para mí.

Así que aquí está el truco para la versión 1.x

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

Reemplácelo con:

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);

Las respuestas anteriores no funcionaron para mí. Posiblemente los nombres de las opciones se cambiaron desde el '11, pero lo siguiente me sirvió:

ChartJsProvider.setOptions
  scaleBeginAtZero: true


Tienes que anular la escala, prueba esto:

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}

var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                        label: "My First dataset",
                        data: [10, 80, 56, 60, 6, 45, 15],
                        fill: false,
                        backgroundColor: "#eebcde ",
                        borderColor: "#eebcde",
                        borderCapStyle: 'butt',
                        borderDash: [5, 5],
                    }]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 100
                            }
                        }]
                },
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Legend'
                }
            }
        };

        var ctx = document.getElementById("canvas").getContext("2d");
       new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
</body>


yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]