@domoinc/multi-line-chart

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:

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

Example

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