Text annotations about chartjs-plugin-annotation

[CrescentCraftorium]

@Kiszko - I realise this is quite an old post, but since it's still open, I've been adding text annotations by making a line type annotation, using the label.content property, then setting the line annotation borderColor to transparent. Seems to work for most of what I need. I have a range of data highlighted so it stands out with a box annotation and and a vertical line annotation the same way as above to add a text label for box annotations as well.

Edit: Here's a JSFiddle displaying the concept of the above example - https://jsfiddle.net/WebGaze/875anwz6/

[etimberg]

@Kiszko this hasn't been abandoned. I haven't really had time to work on this as most of my time is being spent on updates to Chart.js itself. I'm happy to merge PRs though that add functionality. I'm also happy to add other maintainers if there's someone who wants to do a lot of work on the annotations plugin

[hkvongit]

@Kiszko - I realise this is quite an old post, but since it's still open, I've been adding text annotations by making a line type annotation, using the label.content property, then setting the line annotation borderColor to transparent. Seems to work for most of what I need. I have a range of data highlighted so it stands out with a box annotation and and a vertical line annotation the same way as above to add a text label for box annotations as well.

Edit: Here's a JSFiddle displaying the concept of the above example - https://jsfiddle.net/WebGaze/875anwz6/

Thanks dude for the awesome example
Guys check the jsfiddle for more details

annotation: {
annotations: [{
type: 'box',
id: 'target-period-1',
xScaleID: 'x-axis-0',
yScaleID: 'y-axis-0',
xMin: 2,
xMax: 7,
yMin: 0,
yMax: 20,
borderColor: 'rgba(255,159,64,1)',
backgroundColor: 'rgba(255,159,64,0.2)',
borderWidth: 1
}, {
type: 'line',
id: 'call-count-1',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 4.5,
borderColor: 'transparent',
label: {
backgroundColor: 'rgba(0,0,0,0.8)',
fontFamily: 'sans-serif',
fontSize: 12,
fontStyle: 'bold',
fontColor: '#fff',
xPadding: 12,
yPadding: 6,
cornerRadius: 4,
position: 'center',
yAdjust: -100,
enabled: true,
content: 'Test Label'
}
}],
drawTime: 'afterDraw'
}

[methnen]

Would love to see this added into the plugin as well.

The workaround @hkvongit mentions is sort of workable but has all kinds of issues for many use cases.

I'd add the additional desire for a way to give the text a URL (i.e. a way to make a clickable annotation that's actually a link).

I realize canvas doesn't have links in the traditional sense but it would be possible for the JS to watch for clicks on the annotation and then redirect the user when they click it based on some attribute.

[Shogobg]

Awesome workaround by @CrescentCraftorium