Annotation line not drawn

Hi guys,

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

https://noahsbox.com/?fts=0&preview_theme_id=79991996475

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!

<script>
  setTimeout(loadChart)
  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: {
            beginAtZero:true
          }
        }]
      },
    },
     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 http://www.chartjs.org/docs/#advanced-usage-creating-plugins
			drawTime: 'afterDatasetsDraw', // (default)

			// Mouse events to enable on each annotation.
			// Should be an array of one or more browser-supported mouse events
			// See https://developer.mozilla.org/en-US/docs/Web/Events
			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
	// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
	//borderDash: [2, 2],

	// Line Dash Offset
	// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
	//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 https://developer.mozilla.org/en-US/docs/Web/Events 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) {}
}]
		}
       
       
    }]
}
);
  } 
</script>

[asehdev]

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

[etimberg]

Original issue appears resolved