¿Cómo establecer el valor inicial como "0" en chartjs?

109

aquí está mi código. Necesito establecer el valor inicial como "0" en las escalas de los ejes X e Y. He probado la última versión de la opción de escalas.

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }     
Suganthan Raj
fuente

Respuestas:

298

Para Chart.js 2. *, la opción para que la escala comience en cero se muestra en las opciones de configuración de la escala lineal . Esto se usa para datos numéricos, que probablemente debería ser el caso de su eje y. Entonces, necesitas usar esto:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

Aquí también se encuentra disponible un gráfico de líneas de muestra donde la opción se usa para el eje y. Si sus datos numéricos están en el eje x, use en xAxeslugar de yAxes. Tenga en cuenta que una matriz (y plural) se usa para yAxes(o xAxes), porque también puede tener varios ejes.

xnakos
fuente
@SuganthanRaj ¡De nada! Solo asegúrese de consultar los documentos de Chart.js 2.0. Mucho ha cambiado desde la versión 1.0 y la mayoría de los ejemplos en línea se aplican a la versión 1.0. ;)
xnakos
@SuganthanRaj Por ejemplo, scaleShowVerticalLinesno es válido para 2.0. O la plantilla de información sobre herramientas. Las opciones, en general, siguen un enfoque jerárquico en 2.0.
xnakos
3

Si necesita usarlo como configuración predeterminada, simplemente colóquelo min: 0dentro del nodo defaults.scale.ticks, de la siguiente manera:

defaults: {
  global: {...},
  scale: {
    ...
    ticks: { min: 0 },
  }
},

Referencia: https://www.chartjs.org/docs/latest/axes/

tuliomarchetto
fuente
1

Agregue esta opción:

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(Referencia: Chart.js )

NB: La solución original que publiqué fue para Highcharts, si no está utilizando Highcharts, elimine la etiqueta para evitar confusiones

wmash
fuente
2
no funciona . Estoy usando la última versión de chartjs v2.1
Suganthan Raj
@wmash Necesito comenzar el gráfico desde el valor predefinido. Sabes como hacer esto? Traté de poner esta opción en verdadero y falso, pero no funciona.
Michael.D
esto es incorrecto y podría / debería eliminarse. beginAtZero: truees lo que necesitas
triple