0
266
ViewsGráfico Js, etiquetas repetidas yAxis
Y tengo este problema: el usuario 1 repite dos veces en dos colores, gris y blanco. Gray no debe ser visto 
Este problema comienza cuando pongo estilos en el eje x, repite las etiquetas. hay alguna solucion para este caso? El requisito es simplemente cambiar el color de las etiquetas de los ejes y las marcas. La barra gris está en la parte inferior, es decir, no se apila con las rojas y azules.
var data = { labels: ["User1", "User2"], datasets: [ { stack:1, label: "TotalTime", backgroundColor: "red", borderWidth: 1, data: [50, 50], yAxisID:1 }, { stack:1, label: "TotalTime", backgroundColor: "blue", borderWidth: 1, data: [40, 40], yAxisID:1 }, { label: "Leave", backgroundColor: "rgba(191,191,191, 0.5)", borderWidth: 1, data: [100, 100], yAxisID:1 }, ], }; var options = { indexAxis: "y", scales: { y: { ticks: { color: "white", font: { size: 12, }, }, stacked: true, }, x: { ticks: { color: "white", font: { size: 12, }, }, } } } var ctx = document.getElementById("myChart").getContext("2d"); var myBarChart = new Chart(ctx, { type: 'bar', data: data, options: options }); canvas{ background-color:black } <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> <canvas id="myChart" width="500" height="300"></canvas>
·
Juan Pablo Isaza
1 answers
Answer question0
Es debido a su yAxisID , no lo define, pero y aún crea un nuevo eje para él, ya que no lo hizo usted con esa identificación, por lo que si lo elimina o lo convierte en el que ha definido, no lo vuelve a hacer. más
var data = { labels: ["User1", "User2"], datasets: [{ label: "TotalTime", backgroundColor: "red", borderWidth: 1, data: [50, 50], }, { label: "TotalTime", backgroundColor: "blue", borderWidth: 1, data: [40, 40], }, { label: "Leave", backgroundColor: "rgba(191,191,191, 0.5)", borderWidth: 1, data: [100, 100], }, ], }; var options = { indexAxis: "y", scales: { y: { ticks: { color: "white", font: { size: 12, }, }, stacked: true, }, x: { stacked: true, ticks: { color: "white", font: { size: 12, }, }, } } } var ctx = document.getElementById("myChart").getContext("2d"); var myBarChart = new Chart(ctx, { type: 'bar', data: data, options: options }); canvas { background-color: black } <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> <canvas id="myChart" width="500" height="300"></canvas>
·
Juan Pablo Isaza
Report
Answer question