@domoinc/multi-line-chart

MultiLineChart - Domo Widget

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@domoinc/multi-line-chart
4.0.145 years ago6 years agoMinified + gzip package size for @domoinc/multi-line-chart in KB

Popular Searches

Readme

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

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