Closed mitchthebaker closed 1 year ago
Nevermind figured it out. I had to specify xMin/xMax by index, so if I want the vertical line at 1250 I have to set xMin = 4, xMax = 4.
Is there any way to set xMin/xMax by the value instead of the index?
@mitchthebakerx/yMin
and Max
are working with both value and index, when the axis is a category one, as in your case. But for category axis, the labels should be strings, even if it can manage labels as numbers.
The plugin accesses to the category axis by value, if is x/yMin
and Max
are set as strings or by index if set as numbers.
To provide the index in this case, you could use a scriptable options as the following (see codepen https://codepen.io/stockinail/pen/RwYROoW):
{
type: 'line',
data: {
labels: [1, 2, 3, 4], // <-- numbers
datasets: [ {
data: [102, 200, 80, 55],
}],
},
options: {
plugins: {
annotation: {
annotations: {
my: {
type: 'line',
xMin: ({chart}) => chart.data.labels.indexOf(1), // <-- gets the index of value 1 and the line is drawn at index 0
xMax: ({chart}) => chart.data.labels.indexOf(1), // <-- gets the index of value 1 and the line is drawn at index 0
borderColor: 'red',
borderWidth: 3
}
}
}
}
}
}
Just FYI, the x/yMin
and Max
on line annotations are usually used for "limited" line, where the line doesn't reach the end of chart area. Instead, if you need to draw for whole size of chart area, you can use value
(and endvalue
with scaleID
option to identify the scale) options, with the same logic (index or value) of x/yMin
and Max
above described.
{
type: 'line',
data: {
labels: [1, 2, 3, 4], // <-- numbers
datasets: [ {
data: [102, 200, 80, 55],
}],
},
options: {
plugins: {
annotation: {
annotations: {
my: {
type: 'line',
scaleID: 'x',
value: ({chart}) => chart.data.labels.indexOf(1),
borderColor: 'red',
borderWidth: 3
}
}
}
}
}
}
@stockiNail Thanks so much for the in-depth response! The example you created will help out a lot.
Been working with chart.js and everything's been super smooth, but have been facing difficulties with getting a vertical line annotation to display correctly after adding chartjs-plugin-annotation.
I've been using this example in the documentation:
This is my chart configuration -- line annotation I'm trying to create is at the bottom.
My x/y scales are labeled x/y so I don't think xScaleID/yScaleID are the issue.
What I don't understand is that if I set xMin = 0, yMin = 200, and xMax = 0, yMax = 0, or in other words end one at (0, 200) and end two at (0, 0) the vertical line annotation displays correctly.
However, if I want to move xMin/XMax to anywhere else along the x axis like shown in the chartjs-plugin-annotation example it doesn't display.