Grey background comes out when filtering in pie chart

[pyotr777]

When selecting in pie chart there comes out grey background (see attached screenshot). Background is wider than the chart and it does't look neat.

Is it a feature or a bug?
I would prefer no grey borders, i.e. grey background should be same size as the chart itself.

Original chart

The same chart after clicking on it

[gordonwoodhull]

My answer

It's a feature, and it comes from dc.css. I agree it might look cleaner without the outline. For your purpose, you can just add a CSS rule to a stylesheet loaded after dc.css:

.dc-chart .selected path, .dc-chart .selected circle {
  stroke-width: 0
}

My questions

As for the issues with it getting clipped, I'm guessing that you set the chart width to twice the radius, or smaller? For most charts, dc.js uses margins as a fudge factor, but for the pie chart, it simply uses the given radius and chart width and height, or takes the minimum of width/2 or height/2.

It looks like even the unfiltered chart is somewhat clipped; is that true on your actual page? Although setting the width and height greater than 2*radius is an okay workaround, it's a bug if the safety guard linked above doesn't work.

Looks like it's rather difficult, but possible to read the CSS rules from JavaScript, so we could conceivably also allow a small margin so that the selection-outlining also fits, if it's enabled.

[pyotr777]

Sorry it took me so long to write a reply.

As for the issues with it getting clipped, I'm guessing that you set the chart width to twice the radius, or smaller?

I am not setting the chart radius, only width and height (both to 150).

It looks like even the unfiltered chart is somewhat clipped; is that true on your actual page?

Unfiltered chart looks fine. It's just me couldn't select it all when taking the screenshot.

Your css rule works fine.

Thank you for your help!