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

Resuelto Rajendra Thorat asked hace 9 años • 20 respuestas

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 avatar Mar 11 '15 22:03 Rajendra Thorat
Aceptado

Para chart.js V2 (beta), utilice:

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 avatar Feb 22 '2016 12:02 Ofer Segev

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>
Expandir fragmento

Ramesh avatar Aug 11 '2016 13:08 Ramesh

Editar:

Han hecho algunos cambios. Actualmente, esto es lo que funcionará.

       scales: {
            x: {
                ...,
                max: value,
                min: value
            },
            y: {
                ...same as x
            }
        }

Aquí está el enlace a los últimos cambios min max chart js


Antigua respuesta:

A partir de febrero de 2022 , esto funciona. 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 avatar Oct 25 '2016 15:10 Koushik Das

Tienes que anular la escala, prueba esto: (applies to ChartJS v1.x)

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 avatar Mar 11 '2015 15:03 Mousa Dirksz