Adding lines with arrow heads inside the graph(chart.js- 2.9.4) #483
Unanswered
namireddyvishal
asked this question in
Q&A
Replies: 1 comment
-
@namireddyvishal for your information, even if this discussion is related to Chart.js 2.9.4, arrow heads are available from version 1.3.0 but Chart.js 3.x is required. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I haven't found any options in the document to add the arrow headed line
And another issue:
I have created a line using chart.js options:
annotations: {
type: 'line',
drawTime: 'afterDatasetsDraw',
borderColor: color,
mode: '',
scaleID: '',
value: null,
borderWidth: borderWidth,
borderDash: borderDash,
label: {
enabled: true,
content: '',
position: '',
xAdjust: null,
yAdjust: null,
rotatation: 90
// color: 'black',
backgroundColor: '#C0C0C0'
}
}
And added lines values:
setXBoxAnnotationValue(i, x1, x2, y) {
// horizontal line
this.myChart.options.annotation.annotations[i].xMax = x2;
this.myChart.options.annotation.annotations[i].xMin = x1;
this.myChart.options.annotation.annotations[i].yMax = y;
this.myChart.options.annotation.annotations[i].yMin = y;
}
setYBoxAnnotationValue(i, x, y1, y2) {
// vertical line
this.myChart.options.annotation.annotations[i].xMax = x;
this.myChart.options.annotation.annotations[i].yMax = y2;
}
labels using:
setXLineAnnotation(i, labelPosition = null, yAdjust = null) {
this.myChart.options.annotation.annotations[i].mode = 'horizontal';
this.myChart.options.annotation.annotations[i].scaleID = 'y-axis-0';
this.myChart.options.annotation.annotations[i].label.position = labelPosition;
this.myChart.options.annotation.annotations[i].label.yAdjust = yAdjust;
}
setYLineAnnotation(i, labelPosition, xAdjust) {
this.myChart.options.annotation.annotations[i].mode = 'vertical';
this.myChart.options.annotation.annotations[i].scaleID = 'x-axis-0';
this.myChart.options.annotation.annotations[i].label.position = labelPosition;
// this.myChart.options.annotation.annotations[i].rotation = 90;
this.myChart.options.annotation.annotations[i].label.xAdjust = xAdjust;
}
Rotation is also not working
And the labels are floating when I zoom
How should I make it stable and stick to a data point on the graph
Beta Was this translation helpful? Give feedback.
All reactions