CODEWITHSUNDEEP
javascriptcssangularjschartschart.js
Alexandre Nascimento
Alexandre Nascimento

Reputation: 183

How to align legend in angular-chart.js

II'm using an angular-chart.js chart-pie.

I need to align the legend like horizontalAlign: "right", verticalAlign: "center", but I have no idea how to do it.

My code

HTML:

<canvas id="pie" class="chart chart-pie"
      chart-data="data" chart-labels="labels" chart-options="options">
</canvas>

Module:

angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data = [300, 500, 100];
    $scope.options = { 
        legend : { 
            display : true, 
            position : "right"
        }
    };
});

Upvotes: 1

Views: 6763

Answers (1)

Monika Bozhinova
Monika Bozhinova

Reputation: 294

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: enter image description here

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.

Upvotes: 3

Related Questions