@domoinc/multi-line v10.1.2

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:

function (d) {
	          return this.accessor(d) !== undefined;
	        }

Default accessor:

function (line) {
	          return String(line[2]);
	        }

X Axis

Type: number,date,string

Default validate:

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:

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:

function (d) {
	          return !isNaN(this.accessor(d));
	        }

Default accessor:

function (line) {
	          return Number(line[1]);
	        }

Events

Dispatch Events

External Events

external:mouseout
external:mouseover

Example

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);