I am currently facing an issue with the vertical line in my chart created using chart.js. Specifically, the problem lies with the category axis where the years are labeled as [year 0, year 1, year 2, year 3..].
Here is an example of a functioning chart with annotations displaying horizontal lines.
var lines = [{
type: 'line',
mode: 'horizontal' ,/*set vertical for vertical line */
scaleID: 'y-axis-label', /* id of the axis */
value: 50,
borderColor: '#E35500',
borderWidth: 3
}];
var config = {
type: 'bar',
data: {
labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
// labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
datasets: [{
type: 'line',
label: 'Cost',
data: [35, 15, 25, 14, 10, 7],
borderColor: '#E35500',
fill: false,
lineTension : 0,
borderJoinStyle: 'miter',
}, {
type: 'line',
label: 'Cash Flow',
data: [-50, 180, 170, 220, 160, 190],
borderColor: '#FFC000',
fill: false,
lineTension : 0,
},
{
type: 'bar',
label: 'Benifit(One time)',
backgroundColor: "#005998",
data: [0,50, 60, 80, 50, 60],
}, {
type: 'bar',
label: 'Benifit(Recurring)',
backgroundColor: "#0FAAFF",
data: [0,150, 150, 180, 120, 140],
}],
lineAtIndex: 2
},
options: {
title: {
display: true,
text: 'Cash Flow Analysis and Breakdown'
},
annotation: {
drawTime: "afterDraw",
annotations: lines
},
scales: {
xAxes: [{
stacked : true,
beginAtZero: true,
barPercentage: 0.3,
id : 'x-axis-label',
position:'bottom',
scaleStartValue: 20,
labelString: 'Year',
gridLines: {
display:false
},
}],
yAxes: [{
stacked : true,
id : 'y-axis-label',
ticks: {
max: 300,
min: -50,
stepSize: 50,
},
position:'left',
gridLines: {
display:false
},
}]
},
legend : {
position: 'right',
labels:{
boxWidth:20,
}
},
maintainAspectRatio: false,
scaleBeginAtZero: true
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
<canvas id="canvas"></canvas>
</div>Below is an example of a non-working chart with annotations plugin attempting to show a vertical line.
Is there any way I can create a vertical line at 4.5 years on the chart?
Thank you in advance.