# BarGauge

Bar gauge with label and value



## Configuration Options


#### alternateTextColor
Type: `color`  
Default: `"#333333"`  

Color of the number value when outside of the gauge

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

Color of the gauge

#### barStartPos
Type: `number`  
Default: `0`  

Sets starting pos after labels for left-alinging bars

#### barTextPadding
Type: `number`  
Default: `5`  
Units: `px`

Padding between edge of bar and text

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

Name of chart for reporting

#### height
Type: `number`  
Default: `30`  

Height of the gauge

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

#### labelBeforeBar
Type: `boolean`  
Default: `true`  

Labels will be at the start of the bar, false means it will be at the end of the bar

#### labelTextColor
Type: `color`  
Default: `"#8A8D8E"`  



#### labelTextSize
Type: `number`  
Default: `14`  
Units: `px`

Styles for all bar labels showing values

#### leftToRight
Type: `boolean`  
Default: `true`  

Bar transitions left to right, false means transitions right to left

#### maxWidth
Type: `number`  
Default: `null`  

Max width of all bar gauges if more than one is called

#### prefix
Type: `string`  
Default: `""`  

String to be appended before the value number

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

Flag for turning off data validation

#### suffix
Type: `string`  
Default: `""`  

String to be appended after the value number

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



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

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

#### valueTextColor
Type: `color`  
Default: `"#333333"`  

Color of the number value

#### valueTextSize
Type: `number`  
Default: `14`  
Units: `px`

Text size of the number indicators inside and outside of the gauge

#### width
Type: `number`  
Default: `100`  

Width of the gauge

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

dispatch:mouseover  
dispatch:mouseout  
#### External Events

external:mouseover  
external:mouseout  

## Example

```js  
//Setup some fake data
var data = [
  ['PUSHED', 200]
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr('height', '500px')
  .attr('width', '500px')
  .append('g')
  .attr('transform', 'translate(0,0)')
  .chart('BarGauge')
  .c({
    width: 400,
    height: 50,
    barStartPos: 75,
    // min: 50,
    // labelTextColor: 'red'
  });

//Render the chart with data
chart._notifier.showMessage(false);
chart.draw(data);
```