# CAPercentGaugeWithText





## Configuration Options


#### badValueThreshold
Type: `number`  
Default: `0.33`  

Any value below this percent indicates something is bad

#### centerBackgroundArc
Type: `boolean`  
Default: `false`  

undefined

#### centerFillColor
Type: `color`  
Default: `"#FFFFFF"`  

Color for the background

#### centerFillOpacity
Type: `number`  
Default: `100`  
Units: `%`

Transparency factor of the background (0 is transparent, 100 is full color)

#### chartName
Type: `string`  
Default: `"CAPercentGaugeWithText"`  

Name of chart for reporting

#### drawDuration
Type: `number`  
Default: `1500`  

Draw duration in milliseconds

#### ease
Type: `string`  
Default: `"cubic-in-out"`  

One the built in d3 easing functions.

#### fontWeight
Type: `select`  
Default: `{"name":"300 - Light","value":300}`  

Greater values correspond to increased font boldness (some fonts do not support every value)

#### gaugeBadFill
Type: `color`  
Default: `"#F27E79"`  

Fill color that indicates something is bad

#### gaugeFillPrimaryColor
Type: `color`  
Default: `"#73B0D7"`  

Fill color for the gauge

#### gaugeGoodFill
Type: `color`  
Default: `"#91D0BC"`  

Fill color that indicates something is good

#### gaugeNeutralFill
Type: `color`  
Default: `"#FCCF84"`  

Fill color that indicates something is neutral

#### generalNotFilledColor
Type: `color`  
Default: `"#E4E5E5"`  

Fill color that indicates something is empty

#### generalSeparatorColor
Type: `color`  
Default: `"#FFFFFF"`  

Border color for each element

#### goodValueThreshold
Type: `number`  
Default: `0.67`  

Any value above this percent indicates something is good

#### height
Type: `number`  
Default: `400`  
Units: `px`

Height of the widget

#### innerArcOffset
Type: `number`  
Default: `0.5`  

A percentage which controls the width of the background arc. Larger percent => Smaller background arc

#### innerArcRadius
Type: `number`  
Default: `0.85`  

A percentage which controls the width of the arcs. Larger percent => Smaller arcs

#### 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.

#### shouldValidate
Type: `boolean`  
Default: `true`  

Flag for turning off data validation

#### showPercent
Type: `boolean`  
Default: `true`  

Boolean whether or not percent is shown

#### startArcAtTop
Type: `boolean`  
Default: `false`  

If true, arc begins at the top and moves clockwise

#### strokeWidth
Type: `number`  
Default: `1`  
Units: `px`

Width of the element's border

#### textFontFamily
Type: `string`  
Default: `"Open Sans"`  

Font type for the text

#### textSize
Type: `number`  
Default: `36`  
Units: `px`

Font size for the value

#### updateSizeableConfigs
Type: `boolean`  
Default: `true`  

Flag for turning off the mimic of illustrator's scale functionality

#### useColorRanges
Type: `boolean`  
Default: `false`  

If true, use good/neutral/bad fills

#### width
Type: `number`  
Default: `400`  
Units: `px`

Width of the widget

## 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)); }
```

Default accessor:  
```js
function (line) { return Number(line[1]); }
```

## Events


#### Dispatch Events

#### External Events

external:mouseover  
external:mouseout  

## Example

```js  
//Setup some fake data
var data = [
  ['Sales', 0.78],
  // ['Sales', -333],
];

//for gauge with text
var aHeight = 172;
var aWidth = 172;

//for gauge
// var aHeight = 400;
// var aWidth = 400;

//Initialze the widget
var chart = d3.select('#vis')
  .select('svg')
  .append('g')
  .attr('transform', 'translate(19,142)') //for gauge with text
  // .attr('transform', 'translate(50,53)') //for gauge
  .chart('CAPercentGaugeWithText')
  .c({
    width: aWidth,
    height: aHeight,
  });

//Render the chart with data
chart.draw(data);

setTimeout(function () {
  chart.trigger('external:mouseover');
}, 2500)

setTimeout(function () {
  chart.trigger('external:mouseout');
}, 3500)

```