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
-
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