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>
| 
97 Nov 9, 2022
177 Jan 4, 2023
24 Dec 12, 2022
57 Oct 27, 2022
14 Dec 18, 2022
196 Dec 18, 2022
77 Dec 6, 2022
19.4k Jan 2, 2023
9.2k Jan 2, 2023
952 Dec 29, 2022
5.2k Jan 2, 2023
5.4k Jan 1, 2023
2.9k Dec 31, 2022
1.3k Dec 25, 2022