# HorizontalMultiSeriesBars

Multiple horizontal bars with labels and values



## Configuration Options


#### barStartPos
Type: `number`  
Default: `75`  
Units: `px`

Set the bar distance from the start of the labels

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

The space between the gauge and label

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

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

The primary colors used to represent series data

#### chartSecondarySeriesColors
Type: `colorArray`  
Default: `["#4E8CBA","#D9EBFD","#31689B","#D9EBFD","#D9EBFD","#559E38","#DDF4BA","#387B26","#DDF4BA","#DDF4BA","#E45621","#FDECAD","#A43724","#FDECAD","#FDECAD","#FDECAD"]`  

The secondary colors used to represent series data

#### gaugeGap
Type: `number`  
Default: `10`  
Units: `px`

The space between the gauges

#### gaugeHeight
Type: `number`  
Default: `30`  
Units: `px`

Height of each gauge

#### height
Type: `number`  
Default: `100`  
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.

#### labelBeforeBar
Type: `select`  
Default: `{"name":"Before Gauge","value":true}`  

Set the label position before or after the gauge

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

Font color for the labels

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

Font size for the labels

#### leftToRight
Type: `select`  
Default: `{"name":"Left to Right","value":true}`  

Set the animation direction for the gauges

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

Text added before the number value

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

Flag for turning off data validation

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

Text added after the number value

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



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

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

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

Font size for the values

#### width
Type: `number`  
Default: `700`  
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)) && this.accessor(d) >= 0; }
```

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 = [
  ['North', 140],
  ['South', 200],
  ['East', 250],
  ['West', 170]
];

var chart = d3.select('#vis')
  .append('svg')
  .attr('height', 500)
  .attr('width', 500)
  .append('g')
  .attr('transform', 'translate(50,172.5)')
  .chart('HorizontalMultiSeriesBars')
  .c({
    width: 400,
    height: 25,
  })

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

setTimeout(function () {
  chart.trigger('external:mouseover', {data: data[0]});
}, 2000);
setTimeout(function () {
  chart.trigger('external:mouseout');
}, 3000);
setTimeout(function () {
  chart.trigger('external:mouseover', {data: data[1]});
}, 3000);
setTimeout(function () {
  chart.trigger('external:mouseout');
}, 4000);

```