@domoinc/donut-with-legend

DonutWithLegend

Donut with center text and a legend

<img src=media/widget.png height=500 width=500>

Configuration Options

bounceOutPercent

Type: number
Default: 1.05

Percent of the inner - outer radius to bounce out on hover

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

colorScale

Type: function
Default: ``

undefined

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: 250
Units: px

innerRadius

Type: number
Default: 166.25

Radius to the inside of the Donut

innerTextPadding

Type: number
Default: 20

Padding for the inner text elements

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: true

Shows/Hides the text indicator in the center of the donut

sliceStrokeWidth

Type: number
Default: 1
Units: px

Stroke width of each donut slice

sortData

Type: boolean
Default: true

If true it will sort the data in descending order

textFontFamily

Type: string
Default: Open Sans

Tooltip text font family

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: 250
Units: px

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

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['North', 5],
  ['South', 7],
  ['East', 3],
  ['West', 6]
];

var chart = d3.select('#vis')
	.append('svg')
	.attr({
		width: 500,
		height: 500,
	})
	.append('g')
	.attr('transform', 'translate(40, 102)')
	.chart('DonutWithLegend')
	.c({
		height: 300,
		width: 300,
	});

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);

var d1 = {data: data[1]};
var d2 = {data: data[3]};

setTimeout(function() {
  chart.trigger('dispatch:mouseover', d1);
}, 2000)

setTimeout(function() {
  chart.trigger('dispatch:mouseover', d2);
}, 3000)

setTimeout(function() {
  chart.trigger('dispatch:mouseout');
}, 4000)