Vertical line with annotation plugin and category axis in chart js?

Question

I have a chart using chart.js .. The problem is the vertical line is not working with the category axis i.e years label [year 0, year 1, year 2, year 3..].

Below is the example of working chart with annotations for showing horizontal line.

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 the example of not working chart with annotations plugin for showing vertical line.

var lines = [{
            type: 'line',
            mode: 'vertical' ,/*set vertical for vertical line */
            scaleID: 'x-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,
     
          barPercentage: 0.3,
          id : 'x-axis-label',
       position:'bottom',
     
          
          
      }],
      yAxes: [{
            
            stacked : true,
 id : 'y-axis-label',
         
          
      }]
    },
      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>

What can i do to make a vertical line like at 4.5 years?

Thanks in advance.

Answer 1

The annotations for Chart.js aren't the best, and they struggle in particular with Category scales (it seems linear scales are the only one they work reliably for). However there is a way around it.

Instead of putting your labels directly into the chart, instead have an array of indices as the labels and then add a callback method to format the ticks with these index values.

Unfortunately, with category scales there is no way to specify anything other than one of the tick labels so 4.5 will not work, only 4 or 5. If you want 4.5 then you'll need to have a linear scale and then apply a similar technique as I've showed you here to it.

I have edited your code snippet to show what I mean.

EDIT: I edited the code snippet to show how this can be achieved using linear scales. You must specify a x and y value in your dataset data. I have only edited the one dataset for brevity sake.

var lines = [{
            type: 'line',
            mode: 'vertical' ,/*set vertical for vertical line */
            scaleID: 'x-axis-label', /* id of the axis */
            value:  4.5,
            borderColor: '#E35500',
            borderWidth: 3
        }];

var labels = ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"];

        var config = {
  type: 'bar',

  data: {
    datasets: [{
      type: 'line',
      label: 'Cost',
      data: [{x:0, y:35}, {x:1,y:15}, {x: 2, y:25}, {x:3, y:35}, {x:4,y:15}, {x: 5, y:25}],
      borderColor: '#E35500',
      fill: false,
        lineTension : 0,
   borderJoinStyle: 'miter',
    }],
      lineAtIndex: 2
  },
  options: {
      title: {
            display: true,
            text: 'Cash Flow Analysis and Breakdown'
        },
     
                    annotation: {
                        drawTime: "afterDraw",
                        annotations: lines
                    },
      
    scales: {
        
      xAxes: [{
         
          
          stacked : true,
     
          barPercentage: 0.3,
          id : 'x-axis-label',
          position:'bottom',
          type: 'linear',
          ticks: {
            callback: (index) => {
              return labels[index];
            }
          }     
      }],
      yAxes: [{
            
            stacked : true,
 id : 'y-axis-label',
         
          
      }]
    },
      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>