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>