Chart Js V2 draw Horizontal Bar(Average) Over Vert

Question

I want to draw a single bar over vertical bars(Green Bar). I am using Chart JS V2 with Angular 4.

I found some code to draw lines but its not working in Angular 4.

I used also tried using annotation but its not working. Command to add annotation: npm install chartjs-plugin-annotation --save

Below is my code, works fine to draw vertical bars only. Can anyone help me to draw horizontal line over it.

Answer:

Install npm install chartjs-plugin-annotation --save

Then import 'chartjs-plugin-annotation';

this.ctx = document.getElementById("myChart");
    this.myChart = new Chart(this.ctx, {
        type: 'bar',
        data: {
            labels: this.barData.getLabels(),
            datasets: [{
                label: this.barData.actualLegendLabel,
                data: this.barData.getLineData(),
                backgroundColor: this.backgroundColorBarOne,
                borderColor: [
                    'rgba(81,117, 194,1)',
                ]}]
        },
        options: {
            scales: {
                responsive: true,
                scaleBeginAtZero: false,
                barBeginAtOrigin: true,
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: false
                    }
                }],
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: false
                    }
                }]
            },
            legend: {
                cursor: "line",
                position: 'top',
                labels: {
                    fontSize: 10,                       
                }
            },
            layout: {
                padding: {
                    left: 3,
                    right: 3,
                    top: 5,
                    bottom: 5
                }
            }, annotation: {
                annotations: [{
                    drawTime: 'afterDraw', // overrides annotation.drawTime if set
                    id: 'a-line-1', // optional
                    type: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: '25',
                    borderColor: 'red',
                    borderWidth: 2,           
                    // Fires when the user clicks this annotation on the chart
                    // (be sure to enable the event in the events array below).
                    onClick: function(e) {
                        // `this` is bound to the annotation element
                    }
                }]
            }
        }
    });      

Answer 1

You can add a plugin to your chart which can draw anything you'd like on the chart, for example a green line. You can read about plugins in the documentation for ChartJS. Since you want the green line to appear above the vertical bars, you should use the afterDraw method.

Once you've set the plugin up, the steps to accomplish this would be:

1. Calculate the mean of all the bars in your chart (sum them up and divide by the number of bars)
2. From the previous calculation: Decide the Y position of the line and based on that, draw the green line on the canvas.

Check out CanvasRenderingContext2D if you are new to how the browser canvas works.