krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

CSS applied on SVG are not being recognized by Multibar Horizontal chart #736

Open sickermanex opened 6 years ago

sickermanex commented 6 years ago

I have a project where I'm using different types of charts, I have a defined space to display every chart but when I display a multibar horizontal chart it's bigger than the others.

Anyways, I fixed this problem applying CSS transform:scale() to the <svg> element to keep the same size on all the charts, I also applied CSS transform:translate() to one inner <g>, the first to be exact, inside the <svg> element, but the CSS are not being applied to this item. I want to know if there's any workaround or fix for this problem, or the cause of it.

Here's the example of the less code that I used

nvd3.multiBarHorizontalChart{
  .nv-multiBarHorizontalChart{
    transform: scale(0.805,0.805);
    & > g:first-child{
      transform: translate(23%,13%);
    }
  }
}

to this section of code (already generated by the library)

<svg height="300px" width="300px" class="nvd3-svg" style="height: 300px; width: 300px;">
  <g class="nvd3 nv-wrap nv-multiBarHorizontalChart" transform="translate(20,20)">
    <g>...</g>
    ...
  </g>
</svg>

Thanks in advance.