[Chartjs]-How to align legend in angular-chart.js

Just add this style to your css:

.chart-container {
    position: relative;
}
chart-legend {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
}

I have edited my code. This will align your legend horizontally to the right and vertically in the middle.

Explanation:

The directive creates this html structure:

You can add your own style to the elements.

Edit
Put in html like this:

<style>
   .chart-container {
        position: relative;
    }
    chart-legend {
        position: absolute;
        top: 50%;
        right: 0%;
        transform: translateY(-50%);
    }
</style>

Edit 2.

The code above works for an older version. For the newer version open the Chart.js and add this code

y += me.height/2 - itemHeight*me.legendItems.length/2;

above

drawLegendBox(x, y, legendItem);

to be more exact on line 6553.