score:1
Accepted answer
you have to provide both annotations as object in 1 array, not an array containing objects containing arrays, see example:
var ann = ["4.35", "4.29"];
var ann_labels = ["start", "stop"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleid: 'x-axis-0',
value: value,
bordercolor: 'green',
borderwidth: 1,
label: {
enabled: true,
position: "bottom",
content: ann_labels[index]
}
}
});
var ctx = document.getelementbyid('test').getcontext('2d');
var test = new chart(ctx, {
type: 'line',
data: {
labels: ["1.44", "4.03", "4.35", "3.99", "3.58", "3.75", "4.29", "5.02", "5.95", "6.65"],
datasets: [{
data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
yaxisid: 'a',
backgroundcolor: [
'rgba(91, 192, 222, 0.1)',
],
bordercolor: [
'rgba(0, 123, 255, 0.8)',
],
borderwidth: 1.3,
},
{
data: ["10", "11", "12", "13", "14", "15", "16", "17", ],
yaxisid: 'b',
backgroundcolor: [
'rgba(255, 206, 86, 0.0)',
],
bordercolor: [
'rgba(217, 83, 79, 0.6)',
],
borderwidth: 1.3,
}
]
},
options: {
annotation: {
drawtime: 'afterdatasetsdraw',
annotations: annotations_array
},
maintainaspectratio: true,
scales: {
yaxes: [{
id: 'a',
ticks: {
callback: function(value, index, values) {
return value + ' m';
},
reverse: true,
}
},
{
id: 'b',
position: 'right',
ticks: {
callback: function(value, index, values) {
return value + ' °c';
},
reverse: true,
}
}
]
},
elements: {
point: {
radius: 0,
}
},
legend: {
position: 'bottom',
display: false,
},
}
});
<h3 class="card-text"><canvas id="test"></canvas></h3>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
Source: stackoverflow.com
Related Query
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- Chartjs annotations-plugin: Can I add multiple vertical lines to identically named x-axis labels?
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- ChartJS tooltip when having multiple lines on a time graph
- ChartJS multiple annotations (vertical lines)
- Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension
- ChartJS 3 vertical annotations
- Multiple dynamic vertical lines on a chart with Chart.js
- ChartJS remove vertical grid lines one on two
- Add multiple lines as Y axis title in chartJs
- ChartJs How to display horizontal and vertical lines through the datasets points with their values on axes?
- ChartJS Line Charts - remove color underneath lines
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart.js 2.0 - vertical lines
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- how to plot multiple time series in chartjs where each time series has different times
- ChartJS : How to leave just points without lines
- ChartJS - Donut charts with multiple rings
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- How to render a vertical line on hover in chartjs
- ChartJS Radar Chart radar lines color?
- Horizontal bar with multiple sections in ChartJs
- chartjs - Drawing vertical line on integer x axis value
- ChartJS vertical line not removed on touchend
- Find intersection between the chart lines in chartjs
- Multiple stacked bar chart using ChartJs
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- How to add background color between two lines in yAxis Chartjs
- Multiple lines / data series from JSON file with Chart.js
More Query from same tag
- Remove slice onClick events on Pie Charts in Chart.js
- How to set a minimum width on the values in a doughnut chart?
- Javascript instead of mapping to an array, returning one value at a time instead of a list of data?
- The chart is not getting shown when page is loaded
- Inserting data from arrays into a pie chart (chart.js)
- Using loops to create data arrays
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- Chart.js - doughnut show active segment tooltip (on click of external button)
- Chart disappears just after finishing animation
- How can I move chartJs legend left side and change the width and Hight of the chart?
- ChartJS - Why is the transition on the first dataset bad?
- Chartjs-node with canvas-prebuilt is still throwing 'Cairo not found' errors
- Who knows why I can't plot my chart properly?
- How to loop over Chart.js with Django list view
- HTML tags enable in Default tooltip labels in chart.js
- Chart.js data values from textbox input only load once
- On click of legend, bar is hiding without issue but data value is not hiding in charts.js
- Chartjs radar indexed labels
- React JS Chart JS 2 is not hiding the grid lines in the background
- Line Chart with null values: How to keep Lines connected?
- Multiple usage of Javascript function
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- return array from ajax
- Chart js show/hide legend during runtime via buttonClick
- chart.js doughnut legend in the chart
- Chart.js date x-axis with sparse datapoints
- Chart.js - How to update data
- Adding X axis title causes Uncaught RangeError: minimumFractionDigits value is out of range in Chart.js
- Multiple y-axis in horizontalBar chart js
- Display Chart.js chart in Node.js