@domoinc/multiline-chart/README.md

MultiLineChart - Domo Widget

# MultiLineChart





## Configuration Options


#### axesLabelColor
Type: `color`  
Default: `"#888"`  

Color of all the labels on the axes

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

Font family for axes labels

#### axesLabelSize
Type: `number`  
Default: `11`  
Units: `px`

Size of the labels

#### axesLineColor
Type: `color`  
Default: `"#E3E3E3"`  

Color of all lines found in the axes

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

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



#### highlightType
Type: `string`  
Default: `"hover"`  

Type of highlighting

#### hover
Type: `boolean`  
Default: `true`  

Whether or not to have hover effects

#### initialAnimation
Type: `select`  
Default: `{"name":"Animate","value":true}`  

Enable or disable the initial animation

#### labelValue
Type: `function`  
Default: `"function (d) {\n\t\t          return _Chart.a('Y Axis')(d);\n\t\t        }"`  

Value shown on the permanent label

#### lineDashArray
Type: `string,function`  
Default: `"none"`  

stroke-dasharray to use for lines

#### lineHighlight
Type: `string`  
Default: `"series"`  

How to highlight the lines

#### lineOpacity
Type: `number,function`  
Default: `"function (d, i) {\n\t\t          return 1;\n\t\t        }"`  

Number or array of numbers to use for the line opacities

#### permanentLabelSeries
Type: `number`  
Default: `-1`  

Show label on each point of a series

#### pointHighlight
Type: `string`  
Default: `"series"`  

How to highlight the points

#### pointOpacity
Type: `number,function`  
Default: `"function (d, i) {\n\t\t          return 0;\n\t\t        }"`  

Function that returns the opacity for the points

#### pointStyle
Type: `function`  
Default: `"function (container) {\n\t\t          container.append('circle')\n\t\t            .attr({\n\t\t              'r': _Chart.c('radiusSize'),\n\t\t              'cx': _Chart.c('radiusSize'),\n\t\t              'cy': _Chart.c('radiusSize')\n\t\t            });\n\t\t        }"`  

Style to use for points

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

Radii of the line points

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

Flag for turning off data validation

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

Show or hide colored gradient areas under the lines

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

undefined

#### showTooltipOnPointTrigger
Type: `boolean`  
Default: `false`  

Whether or not to show the tooltip on point trigger

#### showVoronoi
Type: `boolean`  
Default: `true`  

Whether or not to draw the voronoi layer

#### singleColor
Type: `color`  
Default: `""`  



#### strokeWidth
Type: `number`  
Default: `1`  
Units: `px`

Width of the line

#### tickFormat
Type: `function`  
Default: `"function (d) {\n\t          if (_Chart.c('xScaleType') === 'date') {\n\t            return moment(d).format('M/DD/YY');\n\t          }\n\t          return d;\n\t        }"`  

Label format function for the tick labels.

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

Background color of the tooltip

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

Font family for the tooltip

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

Color of the tooltip text

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

Size of the tooltip text

#### tooltipValue
Type: `function`  
Default: `"function (d) {\n\t\t          return i18n.summaryNumber(_Chart.a('Y Axis')(d)) + ' | ' + _Chart.a('Series')(d);\n\t\t        }"`  

Value shown on the tooltip

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

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

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



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

Show X Axis

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

The X axis (not including labels, ticks, and gridlines)

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

undefined

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

undefined

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

undefined

#### xScaleType
Type: `string`  
Default: `"string"`  

Type of xScale

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

Show Y Axis

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

The Y axis (not including labels, ticks, and gridlines)

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

undefined

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

undefined

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

undefined

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

A line perpendicular to the zero value on the y axis

## Data Definition


#### Series
Type: `string`

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

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

#### X Axis
Type: `number,date,string`

Default validate:  
```js
function (d) {
		          var isValid = this.accessor(d) !== undefined;
		          isValid = isValid && this.accessor(d) !== '';
		          if (_Chart.c('xScaleType') === 'date') {
		            isValid = isValid && !isNaN(this.accessor(d).getTime());
		          }
		          return isValid;
		        }
```

Default accessor:  
```js
function (line) {
		          if (_Chart.c('xScaleType') === 'date') {
		            return moment(line[0]).toDate();
		          } else if (_Chart.c('xScaleType') === 'number') {
		            return Number(line[0]);
		          } else {
		            return line[0];
		          }
		        }
```

#### Y Axis
Type: `number`

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

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

## Events


#### Dispatch Events

#### External Events


## Example

```js  
// Line Name , Date/x-axis, value/y-axis
var dateData = [
  ['Jan', 1, 'North'],
  ['Feb', 4, 'North'],
  ['Mar', 3, 'North'],
  ['Apr', 4, 'North'],
  ['Jan', 2, 'South'],
  ['Feb', 3, 'South'],
  ['Mar', 4, 'South'],
  ['Apr', 5, 'South'],
  ['Jan', 4, 'East'],
  ['Feb', 3, 'East'],
  ['Mar', 1, 'East'],
  ['Apr', 2, 'East']
];

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

chart._notifier.showMessage(true);
chart.draw(dateData);


/*----------------------------------------------------------------------------------
// Test Update
----------------------------------------------------------------------------------*/
//setTimeout(function () {
//    chart.draw([
//      ['North', 'Jan', -1],
//      ['North', 'Feb', 4],
//      ['North', 'Mar', 3],
//      ['North', 'Apr', 4],
//      ['South', 'Jan', 2],
//      ['South', 'Feb', 3],
//      ['South', 'Mar', 4],
//      ['South', 'Apr', 5]
//    ]);
//}, 2000);

```