1

I am trying to change the position of the legends to the bottom of piechart [which is top by default]. In normal nvd3.js without angular-nvd3, it's suggested to use:

d3.select(".nv-legendWrap")
    .attr("transform", "translate(100,100)");

Is it possible to do this in angular-nvd3 or is there another option?

doogle
  • 3,376
  • 18
  • 23
vinod
  • 8,350
  • 9
  • 32
  • 36

1 Answers1

1

Override the CSS with your custom attributes:

.your-div-class .nv-series:nth-child(1){ transform: translate(0, 0); }
.your-div-class .nv-series:nth-child(2){ transform: translate(0, 20px); }
.your-div-class .nv-series:nth-child(3){ transform: translate(0, 40px); }
.your-div-class .nv-series:nth-child(4){ transform: translate(0, 60px); }
.your-div-class .nv-series:nth-child(5){ transform: translate(0, 80px); }
.your-div-class .nv-series:nth-child(6){ transform: translate(0, 100px); }
.your-div-class .nv-series:nth-child(7){ transform: translate(0, 120px); }
.your-div-class .nv-legend{ transform: translate(180px, 150px); }
.your-div-class .nv-legendWrap{ transform: translate(-80px, 70px); }

your-div-class refers to the class applied to the div container which contains your chart directive. Change the translate(0, 0) property with your (x, y) pixel values.

Gourav Anvekar
  • 66
  • 4