chart.js - horizontal - stacked bar chart js

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

Question

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?

Answer 1

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

Answer 2

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,
[...]

Answer 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
}

Answer 4

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

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

Answer 5

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.

Answer 6

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.

Answer 7

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
}
}]
}
};

Answer 8

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);

Answer 9

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

Answer 10

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

Answer 11

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.

Answer 12

Simplemente configure el valor de scaleStartValue en sus opciones.

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

Vea la documentación para esto here .

Answer 13

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
});
}

Answer 14

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>

Answer 15

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

Answer 16

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