Estoy trabajando en chartJs donde el color de fondo de la barra debe determinarse en función del valor en yLabel.
¿Cómo podemos acceder a yLabel para una barra específica en chartjs para hacer una comparación?
const waterFChart = new Chart(canvasRef.current, { plugins: [ChartDataLabels], type: "bar", data: { labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"], datasets: [ { label: 'Failures', type: "bar", data: [10, 20, 30, 41, 51], //background color is assigned based on if yLabel of bar matches testValue backgroundColor: ylabel === testvalue ? "red" : "yellow", //how can we access yLabelhere hoverBackgroundColor: darkBar, stack: 'Stack 1', } } );Puede hacer opciones programables como esta:
const yVal = 12; const primeCrolor = "green"; const secondColor = "red" const options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: (ctx) => { if (!ctx.parsed) { return secondColor } const allTicks = ctx.chart.scales.y.ticks.map(e => e.value); return (allTicks.includes(yVal) && ctx.parsed.y === yVal) ? primeCrolor : secondColor; } }] }, options: { // Scale config only needed for example to force the correct labels scales: { y: { min: 0, max: 20, ticks: { stepSize: 2 } } } } } const 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.5.1/chart.js"></script> </body>