benkeen / d3pie

A configurable pie chart lib and generator built on d3.js
MIT License
370 stars 203 forks source link

Issues with Bootstrap 3 #156

Closed loretoparisi closed 6 years ago

loretoparisi commented 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.

schermata 2018-05-22 alle 11 00 46

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:

schermata 2018-05-22 alle 11 09 00

while it is correctly (I assume) present in the colored arcs

schermata 2018-05-22 alle 11 08 52

As soon as I hover that arc, the property will change and filled properly:

schermata 2018-05-22 alle 11 11 18
loretoparisi commented 6 years ago

Closing since I think it was due to a override of the svg property


path {
 fill: none
}