0
265
VistasCambiar el color de un valor en el eje x charts.js
Construyo un gráfico de barras apiladas en Charts.js. Quiero que mi eje x tenga 2 colores: Un color para el valor de mi eje x que tiene la barra más alta y otro color para el resto de los valores. Por ejemplo - 
Quiero que el valor "no hacer nada" esté en un color diferente. Así es como construyo mi gráfico:
const myChart = new Chart(ctx, { type: 'bar', data: { labels: data.xs_action, datasets: [{ label: ['Head_1= Right Lane'], data: data.ys_H1a, backgroundColor: ['rgba(255, 99, 132, 0.2)', ], borderColor: ['rgba(255, 99, 132, 1)', ], borderWidth: 1, stack: 'Stack 0', }, { label: ['Head_2 = High Speed'], data: data.ys_H2a, backgroundColor: ['rgba(54, 162, 235, 0.2)', ], borderColor: ['rgba(54, 162, 235, 1)', ], borderWidth: 1, stack: 'Stack 0', }, { label: ['Head_3 = Change Lane'], data: data.ys_H3a, backgroundColor: ['rgba(255, 206, 86, 0.2)', ], borderColor: ['rgba(255, 206, 86, 1)', ], borderWidth: 1, stack: 'Stack 0', }, ] }, options: { scales: { x: { gridLines: { display: false, }, ticks: { color: 'blue', } }, y: { gridLines: { display: false, }, } } } }); }En mis datos, también tengo la posición del valor x que quiero que aparezca en un color diferente.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar una opción programable para el color de marca para esto:
var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow"], datasets: [{ label: ['Head_1= Right Lane'], data: [10, 5, 6], backgroundColor: ['rgba(255, 99, 132, 0.2)', ], borderColor: ['rgba(255, 99, 132, 1)', ], borderWidth: 1, }, { label: ['Head_2 = High Speed'], data: [2, 6, 5], backgroundColor: ['rgba(54, 162, 235, 0.2)', ], borderColor: ['rgba(54, 162, 235, 1)', ], borderWidth: 1, }, { label: ['Head_3 = Change Lane'], data: [10, 3, 4], backgroundColor: ['rgba(255, 206, 86, 0.2)', ], borderColor: ['rgba(255, 206, 86, 1)', ], borderWidth: 1, } ] }, options: { scales: { x: { stacked: true, grid: { display: false }, ticks: { color: (ctx) => { const maxValues = ctx.chart.data.datasets.reduce((acc, curr) => { curr.data.forEach((e, i) => { if (acc[i]) { acc[i] = acc[i] + e; } else { acc[i] = e; } }); return acc; }, {}); const labelIndex = ctx.chart.data.labels.indexOf(ctx.tick.label); return maxValues[labelIndex] === Math.max(...Object.values(maxValues)) ? 'blue' : 'red' } } }, y: { stacked: true, grid: { display: false } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body> En una nota al margen, el espacio de nombres para la cuadrícula se cambió en V3 de gridLines a grid por eso sus líneas de cuadrícula no están ocultas.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta