Chartjs duration horizontal bar chart - chart.js

Question

I'm trying to figure out how to approach drawing this chart.
It looks like a stacked horizontal bar chart, but I'm having troubles with defining a datasets format for duration intervals. I still haven't found the right way to structure the data source to achieve this result.
Another option could be a line/scatter chart. And the final one is writing custom plugin and drawing this on a canvas manually, shape by shape. I would like to avoid this though :)
Any idea would be really helpful.
Thanks!

Answer 1

I found the way to work this out with the help of #John Go-Soco. Some very key pieces of the graph config are bellow. In short, each line is a separate dataset with two data points defining a start date and the end date.
const yMap = [ 'amlodipine', 'simvastatin', 'lisinopril' ];
const mapDataPoint = function(xValue, yValue) {
return {
x: xValue,
y: yMap.indexOf(yValue)
};
};
const config = {
type: 'line',
data: {
datasets: [
{
//other dataset config options here
data: [
mapDataPoint('1/1/2007', 'simvastatin'),
mapDataPoint('6/1/2010', 'simvastatin'),
]
},
{
//other dataset config options here
data: [
mapDataPoint('9/1/2010', 'simvastatin'),
mapDataPoint('11/1/2018', 'simvastatin'),
]
},
{
//other dataset config options here
data: [
mapDataPoint('1/1/2007', 'lisinopril'),
mapDataPoint('9/1/2015', 'lisinopril'),
]
},
{
//other dataset config options here
data: [
mapDataPoint('1/1/2014', 'amlodipine'),
mapDataPoint('11/1/2022', 'amlodipine'),
]
},
]
},
options: {
//other chart config options here
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'year',
round: 'day',
displayFormats: {
year: 'YYYY'
},
min: moment('2006', 'YYYY'),
max: moment('2019', 'YYYY')
},
}
],
yAxes: [
{
ticks: {
min: -1,
max: yMap.length,
//setting custom labels on the Y-axes
callback: function(value) {
return yMap[ value ];
}
}
}
]
}
},
};
const ctx = 'reference to your ctx here';
const chart = new Chart(ctx, config)