@domoinc/donut

DonutVTwo

Configuration Options

bounceOutPercent

Type: number
Default: 1.05

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

chartName

Type: string
Default: "DonutVTwo"

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

innerCircleBackgroundFillColor

Type: color
Default: "none"

Fill color for the donut's inner circle background. None will hide the background.

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

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

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
dispatch:mousemove

External Events

external:mouseover
external:mouseout

Example

var data = [
  ["North", 5],
  ["South", 7],
  ["East", 12],
  ["West", 3]
];

var aHeight = 500;
var aWidth  = 500;


//Initialze the widget
var chartGroup = d3.select("#vis")
  .append("svg")
  .attr('width', aWidth)
  .attr('height', aHeight);
var chart = new DonutVTwo(chartGroup)
  .c({
    //showInnerTextIndicator: false,
    //innerCircleBackgroundFillColor: 'white'
  })
  .c('width', aWidth)
  .c('height',aHeight);


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


// Re-draw example
//setTimeout(function () {
//    chart.draw([
//      ["North", 522],
//      ["South", 722],
//      ["East", 122],
//    ])
//}, 3000);

// Trigger Examples
//setTimeout(function ()
//{
//  chart.trigger('external:mouseover', {series:data[0][0], name:data[0][0]});
//}, 2000);
//setTimeout(function ()
//{
//  chart.trigger('external:mouseover', {series:data[2][0], name:data[2][0]});
//}, 3000);
//setTimeout(function ()
//{
//  chart.trigger('external:mouseout');
//}, 4000);