I am working on chartJs where bar background color should be determined based on the value in yLabel.
How can we access yLabel for specific bar in chartjs to make comparision?
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',
}
}
);
You can make of scriptable options like so:
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>