PieWithLegend
Pie chart with a legend
Configuration Options
bounceOutPercent
Type: number
Default: 1.05
Percent of the inner - outer radius to bounce out on hover
chartLabelColor
Type: undefined
Default: "black"
undefined
chartName
Type: string
Default: "PieWithLegend"
Name of chart for Reporting.
chartPrimarySeriesColors
Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]
The primary colors used to represent series data
generalSeparatorColor
Type: color
Default: "#FFFFFF"
Color of each slice's stroke (separator)
generalWashoutColor
Type: color
Default: "#E4E5E5"
Fill color of any donut slice that is not being hovered
height
Type: number
Default: 400
Units: px
Height of the widget
innerCircleBackgroundFillColor
Type: color
Default: "none"
Fill color for the donut's inner circle background. None will hide the background.
innerRadius
Type: number
Default: 0
Radius to the inside of the Donut
innerTextPadding
Type: number
Default: 20
Padding for the inner text elements
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device.
labelFontSize
Type: number
Default: 50
Units: px
The font size used for the label text
labelTextColor
Type: color
Default: "#888888"
Text color of the label displayed in the center of the donut
legendFontColor
Type: color
Default: "#8A8D8F"
Font color for the legend
legendRowHeight
Type: number
Default: 15
Height of the legend rows
legendSeparatorColor
Type: color
Default: "#E4E4E5"
Color for the dividing lines in the legend
legendWashoutColor
Type: color
Default: "#E4E4E5"
Color used to indicate elements that are not being highlighted
legendWidth
Type: number
Default: 100
Width of the legend
outerRadius
Type: number
Default: 273.5
Radius to the outside of the Donut
percentageTextPadding
Type: number
Default: 110
Units: px
How far out to move the percentage text
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showInnerTextIndicator
Type: boolean
Default: false
Shows/Hides the Text indicator in the center of the donut
sliceStrokeWidth
Type: number
Default: 0.5
Units: px
Stroke width of each donut slice
sortData
Type: boolean
Default: false
If true it will sort the data in descending order
textColor
Type: undefined
Default: "black"
undefined
textFontFamily
Type: string
Default: "Open Sans"
Tooltip text font family
tooltipBackgroundColor
Type: color
Default: "#555555"
Background color of the tooltip
tooltipTextColor
Type: color
Default: "#FFFFFF"
Color of the tooltip text
tooltipTextSize
Type: number
Default: 12
Units: px
Text size in the tooltip
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueFontSize
Type: number
Default: 48
Units: px
The font size used for the value text
valueTextColor
Type: color
Default: "#333"
Text color of the value displayed in the center of the donut
width
Type: number
Default: 400
Units: px
Width of the widget
Data Definition
label
Type: string
Default validate:
function (d) {
return this.accessor(d) !== undefined;
}Default accessor:
function (line) {
return line[0] === undefined ? undefined : String(line[0]);
}value
Type: number
Default validate:
function (d) {
return !isNaN(this.accessor(d)) && this.accessor(d) >= 0 && this.accessor(d);
}Default accessor:
function (line) {
return Number(line[1]);
}Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
External Events
external:mouseover
external:mouseout
Example
//Setup some fake data
var data = [
["North", 5],
["South", 7],
["East", 12],
["West", 3]
];
//Initialze the widget
var chartGroup = d3.select("#vis")
.append("svg")
.attr({
height: '500px',
width: '500px'
})
.append("g")
.attr({
'transform': 'translate(65, 125)'
})
var chart = new PieWithLegend(chartGroup)
.c({
width: 250,
height: 250
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);