Estoy usando chart.js para construir un gráfico de líneas. No puedo entender por qué hay dos ejes y en mi gráfico. También intenté cambiar el color de las etiquetas de marca a blanco, pero tampoco funciona. ¡Gracias por tu ayuda! Aquí está la vista previa de mi código: https://codepen.io/suminohh/pen/vYROrEx
var xValues = ['6 am','8 am','10 am','12 pm','2 pm','4 pm','6 pm','8 pm','10 pm','12 am']; var yValues = [7,8,8,9,9,9,10,11,14,14,15]; new Chart("myChart", { type: "line", data: { labels: xValues, datasets: [{ fill: false, lineTension: 0, backgroundColor: "white", borderColor: "white", data: yValues, }] }, options: { legend: {display: false}, scales: { xAxes: [{ gridLines: { color: 'white', zeroLineColor: 'white', }}], yAxes: [ {ticks: { min: 6, max:16, }, color: 'white', }, {gridLines: { color: 'white', //give the needful color zeroLineColor: 'white', }}, ], } } });
Porque tiene dos ejes definidos para yAxes
. Usar una sangría adecuada ayuda a notar esto:
yAxes: [ { ticks: { min: 6, max:16, }, color: 'white', }, { gridLines: { color: 'white', //give the needful color zeroLineColor: 'white', } }, ],
Observa cómo después del color
cierras el objeto y comienzas otro. Póngalos como un objeto y no tendrá dos ejes:
yAxes: [ { ticks: { min: 6, max:16, }, color: 'white', gridLines: { color: 'white', //give the needful color zeroLineColor: 'white', } }, ],