0
269
ViewsChange color of one value in the x-axis charts.js
I build a stacked bar chart in Charts.js.
I want that my x-axis will have 2 colors:
Ona color for the value in my x-axis that has the highest bar and another color for the rest of the values.
For example - 
I want that the value "do nothing" will be in a different color.
This is how I build my chart:
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,
},
}
}
}
});
}
In my data, I also have the position of the x-value I want to appear in a different color.
·
Juan Pablo Isaza
1 answers
Answer question0
You can use a scriptable option for the tick color for this:
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>On a side note, namespace for the grid has been changed in V3 from gridLines to grid thats why your gridlines are not hidden.
·
Juan Pablo Isaza
Report
Answer question