# @domoinc/donut > Donut - Domo Widget Latest version **8.0.1** (published 2016-09-14) · SEE LICENSE IN LICENSE license · 0 weekly downloads ## Install ```sh npm install @domoinc/donut pnpm add @domoinc/donut yarn add @domoinc/donut bun add @domoinc/donut ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 8.0.1 | | Published | 2016-09-14 | | First published | 2016-02-02 | | Weekly downloads | 0 | | License | SEE LICENSE IN LICENSE | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 9 | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Domo Inc. | | Maintainers | aharris88, andrewjensen, bkingery, clm, dallasnorton, excrispy, jaxry, jgalb, jmstewart, jonathan-law, k4paul, morganjohn12, nicksrandall, scott.davidson.domo | | Keywords | domo, app | ## Links - npm: https://www.npmjs.com/package/@domoinc/donut - npm.io page: https://npm.io/package/@domoinc/donut ## Dependencies (9) - [d3](https://npm.io/package/d3.md) ^3.5.14 - [lodash](https://npm.io/package/lodash.md) ^4.5.1 - [d3.chart](https://npm.io/package/d3.chart.md) ^0.3.0 - [@domoinc/legend](https://npm.io/package/@domoinc/legend.md) ^6.0.11 - [@domoinc/da-theme2](https://npm.io/package/@domoinc/da-theme2.md) ^2.8.0 - [@domoinc/utilities](https://npm.io/package/@domoinc/utilities.md) ^4.2.3 - [@domoinc/base-widget](https://npm.io/package/@domoinc/base-widget.md) ^1.4.1 - [@domoinc/summary-number](https://npm.io/package/@domoinc/summary-number.md) ^0.1.1 - [@domoinc/legend-connector](https://npm.io/package/@domoinc/legend-connector.md) 0.0.28 ## Recent versions - 8.0.1 (latest) — 2016-09-14 - 8.0.0 — 2016-07-20 - 7.0.7 — 2016-03-08 - 7.0.6 — 2016-02-29 - 7.0.5 — 2016-02-16 - 7.0.4 — 2016-02-10 - 7.0.3 — 2016-02-10 - 7.0.2 — 2016-02-10 - 7.0.1 — 2016-02-09 - 7.0.0 — 2016-02-09 - 6.0.5 — 2016-02-09 - 6.0.4 — 2016-02-08 - 6.0.3 — 2016-02-05 - 6.0.1 — 2016-02-02 ## README # 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: ```js function (d) { return this.accessor(d) !== undefined; } ``` Default accessor: ```js function (line) { return line[0] === undefined ? undefined : String(line[0]); } ``` #### value Type: `number` Default validate: ```js function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0 && this.accessor(d); } ``` Default accessor: ```js function (line) { return Number(line[1]); } ``` ## Events #### Dispatch Events dispatch:mouseover dispatch:mouseout dispatch:mousemove #### External Events external:mouseover external:mouseout ## Example ```js 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); ``` --- _Source: https://npm.io/package/@domoinc/donut · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._