0👍
I might be wrong, but from my experience, Chartjs doesn’t really support string as Y axis values.
What you can do is putting numerical values and change them with a callback function when you render the chart.
const getColor = function (context) {
const {chart, datasetIndex, dataIndex} = context;
const dataset = chart.data.datasets[datasetIndex];
const data = dataset.data[dataIndex];
if (data == undefined)
return 'rgba(255, 255, 255, 255)';
else
return data.backgroundColor;
}
const yLabels = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8", "Test 9", "Test 10"];
// config
const config = {
type: 'bar',
data: {
datasets: [{
backgroundColor: getColor,
borderColor: getColor,
//barPercentage: 1,
//categoryPercentage: 1,
minimumTime: '2022-09-29T16:10:00',
maximumTime: '2022-09-29T16:22:29',
timeUnit: 'second',
stepSize: 1,
data: [
{
y: 1,
timeSegment: [ '2022-09-29T16:20:37', '2022-09-29T16:20:40' ],
backgroundColor: 'rgba(143, 188, 139, 255)',
borderColor: 'rgba(143, 188, 139, 255)'
},
{
y: 1,
timeSegment: [ '2022-09-29T16:17:50', '2022-09-29T16:17:54' ],
backgroundColor: 'rgba(143, 188, 139, 255)',
borderColor: 'rgba(143, 188, 139, 255)'
},
{
y: 1,
timeSegment: [ '2022-09-29T16:16:51', '2022-09-29T16:16:54' ],
backgroundColor: 'rgba(143, 188, 139, 255)',
borderColor: 'rgba(143, 188, 139, 255)'
},
{
y: 1,
timeSegment: [ '2022-09-29T16:16:03', '2022-09-29T16:16:06' ],
backgroundColor: 'rgba(143, 188, 139, 255)',
borderColor: 'rgba(143, 188, 139, 255)'
},
{
y:1,
timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:06' ],
backgroundColor: 'rgba(143, 188, 139, 255)',
borderColor: 'rgba(143, 188, 139, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:00', '2022-09-29T16:10:10' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:00', '2022-09-29T16:10:02' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:10', '2022-09-29T16:10:20' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:20', '2022-09-29T16:10:23' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:23', '2022-09-29T16:10:26' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:26', '2022-09-29T16:10:29' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:26', '2022-09-29T16:10:31' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:31', '2022-09-29T16:10:41' ],
backgroundColor: 'rgba(100, 149, 237, 255)',
borderColor: 'rgba(100, 149, 237, 255)'
},
{
y: 3,
timeSegment: [ '2022-09-29T16:10:31', '2022-09-29T16:10:41' ],
backgroundColor: 'rgba(100, 149, 237, 255)',
borderColor: 'rgba(100, 149, 237, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:41', '2022-09-29T16:10:46' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
label: 2,
timeSegment: [ '2022-09-29T16:10:46', '2022-09-29T16:10:51' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 2,
timeSegment: [ '2022-09-29T16:10:51', '2022-09-29T16:14:00' ],
backgroundColor: 'rgba(50, 205, 50, 255)',
borderColor: 'rgba(50, 205, 50, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:14:00', '2022-09-29T16:14:02' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:14:00', '2022-09-29T16:14:05' ],
backgroundColor: 'rgba(240, 128, 128, 255)',
borderColor: 'rgba(240, 128, 128, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:14:05', '2022-09-29T16:14:12' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:14' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:22' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:42' ],
backgroundColor: 'rgba(240, 128, 128, 255)',
borderColor: 'rgba(240, 128, 128, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:22', '2022-09-29T16:14:32' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:32', '2022-09-29T16:14:35' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:35', '2022-09-29T16:14:38' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:38', '2022-09-29T16:14:43' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:38', '2022-09-29T16:14:41' ],
backgroundColor: 'rgba(240, 230, 140, 255)',
borderColor: 'rgba(240, 230, 140, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:43', '2022-09-29T16:14:53' ],
backgroundColor: 'rgba(100, 149, 237, 255)',
borderColor: 'rgba(100, 149, 237, 255)'
},
{
y: 5,
timeSegment: [ '2022-09-29T16:14:43', '2022-09-29T16:14:53' ],
backgroundColor: 'rgba(100, 149, 237, 255)',
borderColor: 'rgba(100, 149, 237, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:53', '2022-09-29T16:14:58' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:14:58', '2022-09-29T16:15:03' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:05' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:06' ],
backgroundColor: 'rgba(255, 160, 122, 255)',
borderColor: 'rgba(255, 160, 122, 255)'
},
{
y: 4,
timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:05' ],
backgroundColor: 'rgba(50, 205, 50, 255)',
borderColor: 'rgba(50, 205, 50, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:15:06', '2022-09-29T16:15:11' ],
backgroundColor: 'rgba(240, 128, 128, 255)',
borderColor: 'rgba(240, 128, 128, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:15:11', '2022-09-29T16:15:18' ],
backgroundColor: 'rgba(64, 224, 208, 255)',
borderColor: 'rgba(64, 224, 208, 255)'
},
{
y: 10,
timeSegment: [ '2022-09-29T16:15:18', '2022-09-29T16:15:21' ],
backgroundColor: 'rgba(143, 188, 139, 255)',
borderColor: 'rgba(143, 188, 139, 255)'
}]
}]
},
options: {
maintainAspectRatio: true,
parsing: {
xAxisKey: 'timeSegment',
yAxisKey: 'y'
},
animation: false,
indexAxis: 'y',
scales: {
x: {
type: 'time',
stacked: true,
time: {
unit: 'second',
stepSize: 1
},
min: new Date('2022-09-29T16:09:30'),
max: new Date('2022-09-29T16:20:56'),
ticks: {
autoSkip: true,
minRotation: -90,
maxRotation: -90,
padding: 70
},
beginAtZero: true
},
y: {
type:'linear',
reverse: true,
min: 0,
max: 10,
ticks: {
autoSkip: false,
stepSize: 1,
font: {
size: 8
},
callback: function(val, index) {
return yLabels[index];
}
}
}
},
plugins: {
zoom: {
mode: 'y',
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true,
backgroundColor: 'rgba(255, 90, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
modifierKey: 'ctrl'
}
},
pan: {
enabled: true,
mode: 'xy'
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('chart'),
config
);
Here’s a codepen link so you can see the result
- Chartjs-Chartjs bar order adjustment after bar chart is drawn
- Chartjs-Hide data labels chart.js and draw/mark y = 0 with thicker line
Source:stackexchange.com