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);