@domoinc/ca-stats-circle v5.0.2
CAStatsCircle
Configuration Options
chartName
Type: string
Default: "CAStatsCircle"
Name of chart for reporting
fontColor
Type: color
Default: "#FFFFFF"
Color of the text
fontWeight
Type: select
Default: {"name":"400 - Regular","value":400}
General text font weight. Note: Not all weights are supported by every font family.
gaugeFillPrimaryColor
Type: color
Default: "#73B0D7"
Fill color of the main circle and outer circle strokes
gaugeFillSecondaryColor
Type: color
Default: "#DAEAF8"
Color of the bars and main circle stroke
height
Type: number
Default: 400
Units: px
Height of the widget
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.
labelSize
Type: number
Default: 17
Units: px
Font size for the label
numberLabel
Type: string
Default: "NUMBER COUNTED"
Text for the label
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textFontFamily
Type: string
Default: "Open Sans"
textSize
Type: number
Default: 70
Units: px
Text size of the number
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 400
Units: px
Width of the widget
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 && d.length === 2; }
Default accessor:
function (line) { return Number(parseFloat(line[1])); }
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
['Sales', 2583204]
];
var aHeight = 500;
var aWidth = 500;
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
height: aHeight,
width: aWidth
})
.chart('CAStatsCircle')
.c({
width: aWidth,
height: aHeight,
});
//Render the chart with data
chart._notifier.showMessage(false);
chart.draw(data);