Search code examples
angularjsnvd3.jsdonut-chart

How do I change the legend position?

I am new to AngularJS, I made donut pie chart using NDV3 and just want to move the legend to the right side but I can't get it working.

Now I tried to move legend to the right side of the donut pie chart by using legendposition, but it is not working. Can anyone guide me on how to do this?thanks

Here is my code: Plunker

Solution

  • NVD3 does not support the option to change the placement of the legend. You'll have to do it manually or modify the source. You can of course also modify the CSS for the nv-legendWrap and try positioning the legend.

    I found a workaround, you can play with the positions in the CSS by overriding the default transform property. The first value is the X position and the second is the Y position.

    .nv-series:nth-child(1){ transform: translate(0, 0); }
.nv-series:nth-child(2){ transform: translate(0, 20px); }
.nv-series:nth-child(3){ transform: translate(0, 40px); }
.nv-series:nth-child(4){ transform: translate(0, 60px); }
.nv-series:nth-child(5){ transform: translate(0, 80px); }
.nv-series:nth-child(6){ transform: translate(0, 100px); }
.nv-series:nth-child(7){ transform: translate(0, 120px); }

.nv-legend{ transform: translate(350px, 100px); }

    Here is a preview in your Plunker