@domoinc/line-bar-chart v3.2.1

LineBarChart

This is the line bar chart.

Configuration Options

axesLabelColor

Type: color
Default: #888

Color of all the labels on the Axis.

axesLabelFontFamily

Type: string
Default: Open Sans

Font family for axis labels.

axesLabelSize

Type: number
Default: 11
Units: px

Size in pixels of the labels.

axesLineColor

Type: color
Default: #E3E3E3

Color of all lines found in an Axis.

barLabelFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d.value); }

Format for the bar labels

barPadding

Type: number
Default: 0.25

Padding between the bars

chartLabelColor

Type: color
Default: #888888

Color any general chart labels.

chartName

Type: string
Default: LineBarChart

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.

colors

Type: array
Default: null

Specified colors to be used in color scale

generalSeparatorColor

Type: color
Default: #FFFFFF

Color is used to to outline bar segments filled with the washout color to distinguish the different segments.

generalWashoutColor

Type: color
Default: #E4E5E5

Color used to indicate elements that are not being highlighted.

hasSeriesData

Type: boolean
Default: false

Determines if the chart should have just one color or multiple. Used primarily with single layout

height

Type: number
Default: 100
Units: px

Height of the chart.

initialAnimation

Type: boolean
Default: true

If true, the chart will animate the line in from left to right.

layout

Type: string
Default: single

Determines if the chart is stacked or grouped, or single bars

orientation

Type: string
Default: vertical

Determines if the orientation is vertical or horizontal

radiusSize

Type: number
Default: 5
Units: px

Radius of each data point on the lines.

scale

Type: scale
Default: function scale(x) { return output(x); }

d3 scale object for the axis

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation.

showXAxis

Type: boolean
Default: true

Flag to show the Axis

showYAxis

Type: boolean
Default: true

Flag to show the Y Axis

strokeWidth

Type: number
Default: 1
Units: px

The stroke width for each line.

textFontFamily

Type: string
Default: Open Sans

Font family for any text.

textSize

Type: number
Default: 12
Units: px

General size in pixels for any text.

toolTipTextSize

Type: number
Default: 12
Units: px

tooltipBackgroundColor

Type: color
Default: #555555

Background color on any tooltips.

tooltipTextColor

Type: color
Default: #FFFFFF

Color of any text inside a tooltip.

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 100
Units: px

Width of the chart.

xAxisAddGridlines

Type: boolean
Default: false

Flag to show the gridlines

xAxisDisplayTicks

Type: boolean
Default: true

Flag to show the tick line

xAxisOrient

Type: string
Default: bottom

Sets the orientation of the axis

xAxisTickFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d); }

Label formatter for the ticks

xScale

Type: scale
Default: null

X Axis Scale.

yAxisAddGridlines

Type: boolean
Default: false

Flag to show the gridlines

yAxisDisplayTicks

Type: boolean
Default: true

Flag to show the tick line

yAxisOrient

Type: string
Default: left

Sets the orientation of the axis

yAxisTickFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d); }

Label formatter for the ticks

yScale

Type: scale
Default: null

Y Axis Scale.

Data Definition

Label

Type: string

Default validate:

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

Default accessor:

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

LineLabel

Type: string

Default validate:

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

Default accessor:

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

Series

Type: string

Default validate:

function (d) { return true; }

Default accessor:

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

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

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

lineValue

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var BAR_DATA = [
  ['Jan', 6, 'North'],
  ['Feb', 3, 'North'],
  ['Mar', 5, 'North'],
  ['Apr', 3, 'North'],
  ['May', 6, 'North']
];

var LINE_DATA = [
  ['North', 'Jan', 83],
  ['North', 'Feb', 56],
  ['North', 'Mar', 61],
  ['North', 'Apr', 83],
  ['North', 'May', 74]
];

var data = {
  bar: BAR_DATA,
  line: LINE_DATA
};

var aHeight = 400;
var aWidth = 400;

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    width: 500,
    height: 500
  })
  .append("g").attr('class', 'gStart')
  .attr("transform", "translate(50,50)")
  .chart("LineBarChart")
  .c({
    'width': aWidth,
    'height': aHeight,
    orientation: 'vertical',
    yAxisOrient: "left",
    yAxisTickFormat: d3.DomoNumberCleanup,
    yAxisAddGridlines: true,
    textSize: 18
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);