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

MultiMetricComparisonBarChart - Domo Widget

# ComparisonBarChart

Bar chart that compares two labeled values



## Configuration Options


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

Height of the comparison bar.

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

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: `100`  

Height of the chart.

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

Color for chart labels

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

Font size of labels.

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

Flag for turning off data validation

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

Whether or not to show animations

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



#### textLabel
Type: `function`  
Default: `"function (d, i) {\n\t          return _Chart.a('Label')(d) + ' ' + summaryNumber.summaryNumber(_Chart.a('Value')(d));\n\t        }"`  

The function used for the text labels

#### title
Type: `string`  
Default: `"Tweets"`  

Title on the top of the chart.

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

Color for the title text.

#### titleSize
Type: `number`  
Default: `24`  

Font size of the title.

#### 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: `250`  
Units: `px`



## Data Definition


#### Label
Type: `string`

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

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 && this.accessor(d); }
```

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

## Events


#### Dispatch Events

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

external:mouseover  
external:mouseout  

## Example

```js  
//Setup some fake data
var data = [
  ['@BobBarker', 600000],
  ['@AdamWilder', 100000]
];

var aHeight = 500;
var aWidth = 500;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: aHeight,
    width: aWidth
  })
  .append('g')
  // .attr('transform', 'translate(40,150)')
  .attr('transform', 'translate(0,20)')
  .chart('ComparisonBarChart')
  .c('width', 400)
  .c('barHeight', 50)
  .c('title', 'Tweets')
  .c('labelSize', 10)
  .c('titleSize', 24)
  .c({
    'width': 400,
    'title': 'Tweets'
  });

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

```