Issues with Bootstrap 3
loretoparisi opened this issue · 1 comments
loretoparisi commented
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:
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:
loretoparisi commented
Closing since I think it was due to a override of the svg property
path {
fill: none
}