Closed loretoparisi closed 6 years ago
I'm putting the pie chart in a Bootstrap panel. The pie chart that works ok outside, in the panel here is hiding the chart colors, while when hovering the colors will appear.
My configuration is the following:
var pie = new d3pie(id, { "header": { "title": { "text": "Distribution By Genre", "fontSize": 20, "font": "open sans" }, "subtitle": { "text": "Artist distribution by genre type", "color": "#999999", "fontSize": 11, "font": "open sans" }, "titleSubtitlePadding": 9 }, "footer": { "color": "#999999", "fontSize": 10, "font": "open sans", "location": "bottom-left" }, "size": { "canvasWidth": 600, "pieOuterRadius": "90%" }, "data": { "sortOrder": "value-desc", "content": data }, "labels": { "outer": { "pieDistance": 32 }, "inner": { "hideWhenLessThanPercentage": 3 }, "mainLabel": { "fontSize": 11 }, "percentage": { "color": "#ffffff", "decimalPlaces": 0 }, "value": { "color": "#adadad", "fontSize": 11 }, "lines": { "enabled": true }, "truncation": { "enabled": true } }, "effects": { "pullOutSegmentOnClick": { "effect": "linear", "speed": 400, "size": 8 } }, "misc": { "gradient": { "enabled": true, "percentage": 100 } } });
What I see from the console is the properties fill, stroke on the arc are missing in the white blocks:
fill, stroke
arc
while it is correctly (I assume) present in the colored arcs
As soon as I hover that arc, the property will change and filled properly:
hover
Closing since I think it was due to a override of the svg property
path { fill: none }
I'm putting the pie chart in a Bootstrap panel. The pie chart that works ok outside, in the panel here is hiding the chart colors, while when hovering the colors will appear.
My configuration is the following:
What I see from the console is the properties
fill, stroke
on thearc
are missing in the white blocks:while it is correctly (I assume) present in the colored arcs
As soon as I
hover
that arc, the property will change and filled properly: