# StackedBarGauge





## Configuration Options


#### badValueThreshold
Type: `number`  
Default: `33`  

Any value above this number indicates something is bad

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

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"]]`  

Primary colors used to represent series data

#### colorScale
Type: `scale`  
Default: `""`  

Color scale for chart

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

Fill color that indicates something is bad

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

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

Fill color that indicates something is not highlighted

#### goodValueThreshold
Type: `number`  
Default: `67`  

Any value above this number indicates something is good

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

#### isStackedGauge
Type: `boolean`  
Default: `true`  

Flag to determine if gauge is stacked or single

#### manualColor
Type: `boolean`  
Default: `true`  

Use either the color Domo theme or a custom color set by the 'Gauge Color' config

#### maxValuePosition
Type: `select`  
Default: `{"name":"Outside Gauge","value":false}`  

Set the position of the maximum value indicator

#### orientation
Type: `undefined`  
Default: `"horizontal"`  

Determines if gauge is vertical or horizontal

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

Text added before the number value

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

Flag for turning off data validation

#### showMaxValue
Type: `select`  
Default: `{"name":"Show","value":true}`  

Show or hide the maximum value indicator 

#### showTooltip
Type: `select`  
Default: `{"name":"Hide","value":false}`  

Show or hide the tooltip

#### showValueLabel
Type: `select`  
Default: `{"name":"Show","value":true}`  

Show or hide the number value

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

Text added after the number value

#### textColor
Type: `color`  
Default: `"#555555"`  

Font color for the text

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

Font type for the text

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

Font size for the text

#### tooltipBackgroundColor
Type: `color`  
Default: `"#555555"`  

Background color for the tooltip

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

Font color for the tooltip text

#### tooltipTextSize
Type: `number`  
Default: `12`  
Units: `px`

Font size for the tooltip text

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

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

#### valuePosition
Type: `select`  
Default: `{"name":"Inside Gauge","value":true}`  

Set the position of the number value

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

Width of the widget

## Data Definition


#### quota
Type: `number`

Default validate:  
```js
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }
```

Default accessor:  
```js
function (line) { return parseFloat(line[2]); }
```

#### series
Type: `string`

Default validate:  
```js
function (d) { return this.accessor(d) !== undefined; }
```

Default accessor:  
```js
function (line) { return String(line[0]); }
```

#### value
Type: `number`

Default validate:  
```js
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }
```

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

## Events


#### Dispatch Events

dispatch:click  
#### External Events


## Example

```js  
// Team, Current Sales, Sales Quota
var data = [
  ['North', 70, 100],
  ['South', 36, 100],
  ['East', 51, 100],
  ['West', 18, 100]
];

var HorizontalStacked = {
  chartName: 'HorizontalStacked',
  orientation: 'horizontal',
  width: 400,
  height: 100,
  isStackedGauge: true,
  manualColor: false,
};
var VerticalStacked = {
  chartName: 'VerticalStacked',
  orientation: 'vertical',
  width: 100,
  height: 400,
  isStackedGauge: true,
  manualColor: false,
};
var HorizontalSingle = {
  chartName: 'HorizontalSingle',
  orientation: 'horizontal',
  width: 400,
  height: 100,
  isStackedGauge: false,
  manualColor: true,
};
var VerticalSingle = {
  chartName: 'VerticalSingle',
  orientation: 'vertical',
  width: 100,
  height: 400,
  isStackedGauge: false,
  manualColor: true,
};

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr('height', '500')
  .attr('width', '500')
  .append('g')
  .attr('transform', 'translate(200,50)')
  // .attr('transform', 'translate(35,200)')
  .chart('StackedBarGauge')
  // .c(HorizontalStacked);
  // .c(VerticalStacked);
  // .c(HorizontalSingle);
  .c(VerticalSingle);

chart._notifier.showMessage(true);

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

```