2

I'm trying to hide the axis on my row chart. Just like this problem Hide dc.js chart x-axis. But I couldn't modify the styling no matter what I do.

When I tried using #your-row-chart svg g g.axis.x { display: none; }, but its not applied to my chart.

This is my css
div.dc-chart.sampleId.scrolled-row-chart svg g g.axis { display: none; } Not sure what is my mistake. It works fine till div.dc-chart.sampleId.scrolled-row-chart which modify the style of my row chart.

Below is the expected result. I remove the styling by manually editing the css on Chrome. I even copy the HTML selector to the css to make sure I'm pointing to the correct element, but it still doesn't work.

rowchart

user3794740
  • 312
  • 1
  • 7
  • 18

3 Answers3

1

Apologies for posting an answer to a duplicate question. I know it is against site rules but I think it helps people's google searches, and I am trying to combat the FUD of "I found an answer but it didn't work for me".

As others have commented, it's hard to test without a running example. So I started with the basic row chart example.

I tried adding the CSS

.dc-chart#test svg g g.axis { display: none; }

and it worked fine. Maybe your CSS selector is too specific!

I also tried

chart.margins({left: 0, top: 0, right: 0, bottom: 0});

and this also worked!

Screen shot with no axis, just to make my sad duplicate answer more interesting:

no axis

Gordon
  • 19,811
  • 4
  • 36
  • 74
0

Did you try to edit SVG directly? If it isn't possible, then check if your styles are on higher layer than the ones you want to override (http://qnimate.com/dive-into-css-specificity/)

Vitaliy Frolov
  • 11
  • 2
0

Try adding ::ng-deep prefix in your css

dileepkumar jami
  • 2,185
  • 12
  • 15