Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Annotation line not drawn

See original GitHub issue

Hi guys,

I’m completely new and honestly not a developer but I’m trying to integrate a line into our current chart.

You can find a preview behind this link. I have replaced an image we had with the chart.js but having some difficulties getting the line drawn & a label displayed.

Have tried it now for quite some time and maybe someone here has more luck. Any help would be much appreciated!

  function loadChart() {
var ctx = document.getElementById("Price");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [["Kitchen Box","Standard"]],
        datasets: [{
            label: 'Noahs Box',
            data: [149],
            backgroundColor: [
                'rgba(30, 56, 79, 1)',
                'rgba(30, 56, 79, 1)',
            borderColor: [
                'rgba(30, 56, 79, 1)',
                'rgba(30, 56, 79, 1)',
            borderWidth: 1
            label: 'Amazon',
            data: [198.30],
            backgroundColor: [
                'rgba(255, 153, 0, 1)',
                'rgba(255, 153, 0, 1)'
            borderColor: [
                'rgba(255, 153, 0, 1)',
                'rgba(255, 153, 0, 1)'
            borderWidth: 1
            label: 'traditional Retailers',
            data: [250],
            backgroundColor: [
                'rgba(0,91,71, 1)',
                'rgba(0,91,71, 1)'
            borderColor: [
                'rgba(0,91,71, 1)',
                'rgba(0,91,71, 1)'
            borderWidth: 1
    options: {
      responsive: true,
  	  maintainAspectRatio: false,
      legend: {
      	display: true
      animation: {
       		duration: 15000,
      title: {
			display: false,
       		text: 'Save More When You Bundle',
        	fontColor: '#1E384F',
        	fontSize: 14
      scales: {
        yAxes: [{
          ticks: {
     plugins: [{
      deferred: {
        yOffset: '50%', // defer until 50% of the canvas height are inside the viewport
        delay: 1000      // delay of 500 ms after the canvas is considered inside the viewport
       annotation: {
			// Defines when the annotations are drawn.
			// This allows positioning of the annotation relative to the other
			// elements of the graph.
			// Should be one of: afterDraw, afterDatasetsDraw, beforeDatasetsDraw
			// See
			drawTime: 'afterDatasetsDraw', // (default)

			// Mouse events to enable on each annotation.
			// Should be an array of one or more browser-supported mouse events
			// See
			events: ['click'],

			// Double-click speed in ms used to distinguish single-clicks from
			// double-clicks whenever you need to capture both. When listening for
			// both click and dblclick, click events will be delayed by this
			// amount.
			dblClickSpeed: 350, // ms (default)

			// Array of annotation configuration objects
			// See below for detailed descriptions of the annotation options
			annotations: [{
	type: 'line',

	// optional drawTime to control layering, overrides global drawTime setting
	//drawTime: 'afterDatasetsDraw',

	// optional annotation ID (must be unique)
	id: 'a-line-1',

	// set to 'vertical' to draw a vertical line
	mode: 'horizontal',

	// ID of the scale to bind onto
	scaleID: 'y-axis-0',

	// Data value to draw the line at
	value: 149,

	// Optional value at which the line draw should end
	//endValue: 152,

	// Line color
	borderColor: 'red',

	// Line width
	borderWidth: 5,

	// Line dash
	//borderDash: [2, 2],

	// Line Dash Offset
	//borderDashOffset: 5,

	label: {
		// Background color of label, default below
		backgroundColor: 'rgba(101, 33, 171, 0.5)',

		// Font family of text, inherits from global
		fontFamily: "sans-serif",

		// Font size of text, inherits from global
		fontSize: 12,

		// Font style of text, default below
		fontStyle: "bold",

		// Font color of text, default below
		fontColor: "#fff",

		// Padding of label to add left/right, default below
		//xPadding: 6,

		// Padding of label to add top/bottom, default below
		//yPadding: 6,

		// Radius of label rectangle, default below
		//cornerRadius: 6,

		// Anchor position of label on line, can be one of: top, bottom, left, right, center. Default below.
		//position: "center",

		// Adjustment along x-axis (left-right) of label relative to above number (can be negative)
		// For horizontal lines positioned left or right, negative values move
		// the label toward the edge, and positive values toward the center.
		//xAdjust: 0,

		// Adjustment along y-axis (top-bottom) of label relative to above number (can be negative)
		// For vertical lines positioned top or bottom, negative values move
		// the label toward the edge, and positive values toward the center.
		//yAdjust: 0,

		// Whether the label is enabled and should be displayed
		enabled: true,

		// Text to display in label - default is null. Provide an array to display values on a new line
		content: "Save 25-50%"

	// Mouse event handlers - be sure to enable the corresponding events in the
	// annotation events array or the event handler will not be called.
	// See for a list of
	// supported mouse events.
	onMouseenter: function(e) {},
	onMouseover: function(e) {},
	onMouseleave: function(e) {},
	onMouseout: function(e) {},
	onMousemove: function(e) {},
	onMousedown: function(e) {},
	onMouseup: function(e) {},
	onClick: function(e) {console.log("Annotation", e.type, this);},
	onDblclick: function(e) {},
	onContextmenu: function(e) {},
	onWheel: function(e) {}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:16 (1 by maintainers)

github_iconTop GitHub Comments

asehdevcommented, Jan 14, 2020

@Bra-Mo On this link, I am seeing an error on the console “Uncaught ReferenceError: ChartAnnotation is not defined at loadChart” Did you import it properly, please check that?

I am using it in React JS and imported it like:

import * as ChartAnnotation from 'chartjs-plugin-annotation';

and then used it.

etimbergcommented, Mar 6, 2021

Original issue appears resolved

Read more comments on GitHub >

github_iconTop Results From Across the Web

ChartJs - annotation line can not drawn - Stack Overflow
I found it. I forget to register the plugin. Before I used another plugin which is no manually ad required. But it seems...
Read more >
Line Annotations | chartjs-plugin-annotation
Line annotations are used to draw lines on the chart area. This can be useful for highlighting information such as a threshold.
Read more >
Annotation is not working correctly - CG Cookie
Annotation (2.91) is not working correctly. When I draw, I cannot see the line. If I turn around an object, I see a...
Read more >
Detail/annotation lines not showing up even as I draw them
I draw an annotation line (one that I wish to only see in this view, not a model line) and I get this...
Read more >
How to draw a annotation line like this? - Autodesk Forums
Solved: The attached picture is the problem I have, I just forget hot to draw a line with leader in both side with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found