# MultiLine

multiline, dependency of multiline chart



## Configuration Options


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

Name of the chart

#### 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          return _Chart.a('Y Axis')(d);\n\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          return 1;\n\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          return 0;\n\t        }"`  

Function that returns the opacity for the points

#### pointStyle
Type: `function`  
Default: `"function (container) {\n\t          container.append('circle')\n\t            .attr({\n\t              'r': _Chart.c('radiusSize'),\n\t              'cx': _Chart.c('radiusSize'),\n\t              'cy': _Chart.c('radiusSize')\n\t            });\n\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

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

Width of the line

#### 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          return i18n.summaryNumber(_Chart.a('Y Axis')(d)) + ' | ' + _Chart.a('Series')(d);\n\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`



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

Type of x scale

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

external:mouseout  
external:mouseover  

## Example

```js  
var stringData = [
  ['DAY 1', 0, 'North'],
  ['DAY 2', 4, 'North'],
  ['DAY 3', -3, 'North'],
  ['DAY 4', 4, 'North'],
  ['DAY 5', 3, 'North'],
  ['DAY 6', 4, 'North'],
  ['DAY 7', 3, 'North'],
  ['DAY 8', 4, 'North'],
  ['DAY 1', 0, 'South'],
  ['DAY 2', 3, 'South'],
  ['DAY 3', 4, 'South'],
  ['DAY 4', 5, 'South'],
  ['DAY 5', 2, 'South'],
  ['DAY 6', 3, 'South'],
  ['DAY 7', 4, 'South'],
  ['DAY 8', 5, 'South'],
  ['DAY 1', 0, 'East'],
  ['DAY 2', 2, 'East'],
  ['DAY 3', 1, 'East'],
  ['DAY 4', 2, 'East'],
  ['DAY 5', 4, 'East'],
  ['DAY 6', 3, 'East'],
  ['DAY 7', 1, 'East'],
  ['DAY 8', 2, 'East']
];

var stringChart = d3.select('#vis')
  .append('svg')
  .attr('height', 500)
  .attr('width', 500)
  .attr('transform', 'translate(50, 50)')
  .append('g')
  .chart('MultiLine')
  .c({
    height: 500,
    width: 500,
    xScaleType: 'string',
    showGradients: true
  });

stringChart.draw(stringData);

```