0👍
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)
- [Chartjs]-Animate datasets separately
- [Chartjs]-How to use chart.js script to draw multiple pie Charts
Source:stackexchange.com