@domoinc/multi-metric-comparison-bar-chart/README.md

MultiMetricComparisonBarChart - Domo Widget

# MultiMetricComparisonBarChart

Bar chart that compares multiple metrics.



## Configuration Options


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

Height of the bars

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

The space between the bars

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

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

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

Color used to indicate elements that are not being highlighted

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

#### labelColor
Type: `color`  
Default: `"#888888"`  

Font color for the labels

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

Font size for the labels

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

Flag for turning off data validation

#### showAnimations
Type: `boolean`  
Default: `true`  

Enable or disable the initial animation

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



#### textLabel
Type: `function`  
Default: `"function (d, i) {\n\t          return d[0] + ' ' + summaryNumber.summaryNumber(d[1]);\n\t        }"`  

The function used for the text labels

#### titleColor
Type: `color`  
Default: `"#333"`  

Font color for the titles

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

Font size for the titles

#### titleWeight
Type: `number`  
Default: `700`  

Font weight for the title text

#### 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:  
```js
function (d) { return this.accessor(d) !== undefined; }
```

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

#### Metric
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 Number(line[2]); }
```

## Events


#### Dispatch Events

dispatch:mouseenter  
dispatch:mouseleave  
#### External Events

external:mouseover  
external:mouseout  

## Example

```js  
//Setup some fake data
var data = [
	['North', 'Jan', 600],
	['North', 'Feb', 100],
	['South', 'Jan', 10000],
	['South', 'Mar', 7000],
	['East', 'Feb', 20],
	['East', 'Mar', 74]
];

var aWidth = 500;
var aHeight = 500;
//Initialze the widget
var chart = d3.select('#vis')
	.append('svg')
	.attr({
		height: aHeight,
		width: aWidth
	})
	.append('g')
	.attr('transform', 'translate(125,146)')
	.chart('MultiMetricComparisonBarChart')
	.c({
		width: 250,
		height: 263
	})
	// .colorScale(d3.scale.ordinal().domain(['Jan', 'Feb', 'Mar']).range(['red', 'orange', 'green']));

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

```