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

177

Estoy usando un gráfico de líneas de http://www.chartjs.org/ ingrese la descripción de la imagen aquí

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?

Rajendra Thorat
fuente

Respuestas:

68

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 
    });
}
Mousa Dirksz
fuente
50
Tenga en cuenta que esta respuesta es relevante para las versiones 1.x de chart.js. El scalesobjeto en las versiones 2.x es bastante diferente. Vea la respuesta @OferSegev a continuación y la documentación 2.x aquí .
Boaz
1
¿Existe documentación para v1.x también @Boaz
Black Mamba
1
@IshanMahajan Solía ​​haber :) Parece que ya no puedo encontrarlo. Creo que este es un buen espejo: web-beta.archive.org/web/20150816192112/http://…
Boaz
264

Para chart.js V2 (beta), use:

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

Consulte la documentación de chart.js sobre la configuración de ejes lineales para obtener más detalles.

Ofer Segev
fuente
33
consulta las min, maxy stepsizelos atributos del ticksespacio de nombres
Ralph Callaway
17
suggestedMaxpor el valor máximo mínimo
Finesse
61

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>

Ramesh
fuente
Funcionó bien en 2.4.0
Avinash
39

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
Tom Nijs
fuente
Me sorprende Esto funciona porque pensé que el xAxesy yAxesse suponía que eran anidado bajo scalesen las opciones. Además, esto es más nuevo que la respuesta de Ofer Sergev, que parece ser correcta, también es sorprendente.
claudekennilol
1
Mi gráfico presenta varias ecuaciones con mucho ruido. ¿Hay alguna manera de actualizar el valor máximo en tiempo real basado en el valor más grande de una de las ecuaciones? Por ejemplo, valor máximo + 100.
Martin Erlic
26

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
            }
        }]
    }
};
Koushik Das
fuente
15

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
Troelskn
fuente
13
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
          type: 'line',
          data: yourData,
          options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        min: 0,
                        max: 500    
                    }
                  }]
               }
            }
});

Lo configuro con 'opciones' en v2.

Debe leer la documentación: http://www.chartjs.org/docs/#scales-linear-scale

David Martinez Urrea
fuente
Gracias. Este funcionó para mí en v2.5 de chart.js. Simple y efectivo.
Ionut Necula
2
Los documentos son muy frustrantes ... Tengo que buscar ejemplos de personas para adivinar las opciones disponibles.
Adrian P.
Si alguien está usando JavaScript puro, esta respuesta es la correcta. Escribí un pequeño ejemplo usando esto y publiqué mi código js completo a continuación.
Ishara Amarasekera
9

Escribí un js para mostrar valores de 0 a 100 en el eje y con un espacio de 20.

Este es mi script.js

//x-axis
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];

//The percentage of vehicles of each type
var percentage = [41, 76, 29, 50];

var ctx = document.getElementById("barChart");
var lineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: vehicles,
    datasets: [{
      data: percentage,
      label: "Percentage of vehicles",
      backgroundColor: "#3e95cd",
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 100,
          stepSize: 20,
        }
      }]
    }
  }
});

Este es el gráfico que se muestra en la web.

Porcentaje de vehículos en la ciudad.

Ishara Amarasekera
fuente
9

> La mejor solución


  "options":{
                    scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedMin: 0, //min
                                        suggestedMax: 100 //max 
                                    }
                                }]
                            }
                    }
Abdelhakim Ezzahraoui
fuente
7

Simplemente configure el valor de scaleStartValue en sus opciones.

var options = {
   // ....
   scaleStartValue: 0,
}

Vea la documentación para esto aquí .

rtome
fuente
Esta respuesta es mejor para mí, ya que explica cómo elegir el valor de inicio de la escala, si no 0
Pechou
7
yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]
Ramesh
fuente
1
Aunque este código puede responder la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo responde la pregunta mejoraría significativamente su valor a largo plazo. Por favor, editar su respuesta a añadir un poco de explicación.
Toby Speight
7

Esto es para Charts.js 2.0:

La razón por la que algunos de estos no funcionan es porque debe declarar sus opciones cuando crea su gráfico de la siguiente manera:

$(function () {
    var ctxLine = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctxLine, {
        type: 'line',
        data: dataLine,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            }
        }

    });
})

La documentación para esto está aquí: http://www.chartjs.org/docs/#scales

JPeG
fuente
¿Se está adaptando a los cambios en ChartJS que venían con la versión 2.0 (creo que la pregunta y la respuesta aceptada hace un año trataron con ChartJS 1.x). Quizás esta respuesta sería incluso más útil si se explica brevemente. Tal vez solo comente este comentario si el tiempo lo permite. Gracias.
Dilettant
3

Con 1.1.1, utilicé lo siguiente para arreglar la escala entre 0.0 y 1.0:

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}
Philippe Riand
fuente
1

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, utilicé 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.

AZIIZ Farhat
fuente
0

Como ninguna de las sugerencias anteriores me ayudó con charts.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,
[...]
Jule escéptico
fuente
0

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 anterior (bardata,options)no estaba funcionando 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);
Mamba negro
fuente
0

El gráfico tiene un valor "min" y "max". Documentación en este enlace

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

Samuel Santaera
fuente
44
Esta respuesta no agrega ninguna información a esta pregunta, que se hizo hace 4 años. Además, los enlaces pueden desaparecer, por lo tanto, incluya la esencia del enlace en su publicación.
deformado