Donut Chart

A chart that is functionally identical to a pie chart, with the exception of a blank center and the ability to support multiple statistics at once. Donut charts provide a better data intensity ratio to standard pie charts since the blank center can be used to display additional, related data.

Spark Data components are currently in beta.

Spark Data components need to be initialized before being used.

gux-chart-donut-beta

Properties

Property	Attribute	Description	Type	Default
centerSubText	center-sub-text		string	undefined
centerText	center-text		string	undefined
chartData	chart-data	Data to be rendered in the chart. Data field names must match the values you set in xFieldName and yFieldName	{ [x: string]: any; }	undefined
colorFieldName	color-field-name		string	undefined
embedOptions	embed-options		EmbedOptions<string, Renderers>	undefined
gauge	gauge		boolean	undefined
includeLegend	include-legend		boolean	undefined
innerRadius	inner-radius		number	undefined
labelField	label-field		string	undefined
labelRadius	label-radius		number	undefined
legendFontSize	legend-font-size		number	undefined
legendPosition	legend-position		"bottom" \| "bottom-left" \| "bottom-right" \| "left" \| "none" \| "right" \| "top" \| "top-left" \| "top-right"	'right'
legendSymbolSize	legend-symbol-size		number	undefined
legendTitle	legend-title		string	undefined
legendX	legend-x		number	undefined
legendY	legend-y		number	undefined
outerRadius	outer-radius		number	undefined
showTooltip	show-tooltip		boolean	true
tooltipOptions	tooltip-options		EmbedOptions<string, Renderers>	undefined

Dependencies

Depends on

gux-visualization-beta

Graph


                                                
                                                graph TD;
                                                  gux-chart-donut-beta --> gux-visualization-beta
                                                  style gux-chart-donut-beta fill:#f9f,stroke:#333,stroke-width:4px