@domoinc/donut-with-legend v1.0.5
DonutWithLegend
Donut with center text and a legend
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)