Attempting to have stacked horizontal bar graph to show times on, i've done a fiddle and can get at least one time span on the chart, but i can't seem to get the 2nd one to stack beside it? Ideally what i'm after is to have the blue stack up next to the orange.
Not sure what i'm doing wrong here, if it's just the time format that i'm wrong with or something else.
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
</body>
const options = {
type: 'bar',
data: {
labels: [
"Sun 19th Feb 2023",
"Mon 20th Feb 2023",
"Tue 21st Feb 2023",
"Wed 22nd Feb 2023",
"Thu 23rd Feb 2023",
"Fri 24th Feb 2023",
"Sat 25th Feb 2023"
],
datasets: [{
label: '1st Data',
data: [["08:25", "08:39"]],
backgroundColor: 'orange',
},
{
label: '2nd Data',
data: [["08:39", "08:59"]],
backgroundColor: 'blue',
}
]
},
options: {
indexAxis: 'y',
scales: {
y: {
stacked: true,
},
x: {
parsing: false,
stacked: true,
position: 'top',
type: 'time',
time: {
unit: 'hour',
},
min: "07:00",
max: "19:00",
},
},
},
plugins: {
legend: {
display: false
},
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
Codepen fiddle...
So to answer my own question, i needed to turn off stacking for the x axis