I am using Chart.Js and chartjs-plugin-annotation to display multiple line graphs and annotations to split the chart area in seven zones of different colors.
Right now I am trying with two boxes to start with.
X-Axis - displays time - in HH:m format. Y-Axis - displays values - for the four series.
Problem I face is I see only the second box, and not the first one.
Also the second box occupies entire chart area.
Here is the JSFiddle for the issue I am facing - https://jsfiddle.net/marathepa/16th0x3d/14/
I use the following code for the annotations -
var options = {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: timeFormat,
}
}]
},
plugins: {
annotation: {
annotations: {
box1: {
type: "box",
drawTime: "beforeDatasetsDraw",
xMin: Val1,
xMax: Val2,
yMin: Val3,
yMax: Val4,
backgroundColor: XXXXXXXXXXXXX,
xScaleID: 'x-axis-0'
},
box2: {
type: "box",
drawTime: "beforeDatasetsDraw",
xMin: Val5,
xMax: Val6,
yMin: Val3,
yMax: Val4,
backgroundColor: Val3,
xScaleID: 'x-axis-0'
}
}
}
}
};
If I give the annotations - yScaleID - it doesn't show anything for the boxes.
Val1, Val2, Val5 and Val6 use the same time format format as used by lables (x-axis)
When I hard code Val1, Val2, Val5 and Val6 to specific values, I see only the second box.
Issues seems to be the date values for - labels. Labels are date values and I need to use subset of those on the xMin: Val1,xMax: Val2 and Val5 and Val6 on the annotations.
Links explaining the issue -
https://github.com/chartjs/chartjs-plugin-annotation/issues/438#event-4976403966
https://github.com/chartjs/chartjs-plugin-annotation/discussions/439#discussioncomment-966664
2 things. First you tried defining the
scales
config in the v2 way, this doesnt work anymore. You shouldnt define your scale as time since you dont use time objects, to use the timeScale you need to provide moment/luxon or any other date lib objects and the corresponding date adapter so chart.js can automatically make ticks for the scale.Also as defined in the chart.js annotation docs (https://www.chartjs.org/chartjs-plugin-annotation/guide/types/box.html#configuration) you need to provide a number for the
xMin
andxMax
prop so you can give it the label, you give it the index of where it needs to draw it.Live example:
Basic fiddle with example of the
time
scale implementation with moment: https://jsfiddle.net/Leelenaleee/bza0v3rc/11/