README
Bars
Configuration Options
barPadding
Type: number
Default: 0.25
Padding between the bars
chartLabelColor
Type: color
Default: #888888
Color for chart labels
chartName
Type: string
Default: Bars
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
color
Type: color
Default: ``
Color for the bars
colors
Type: array
Default: null
Specified colors to be used in color scale
domainOffsetPadding
Type: number
Default: 35
Multiple of the pixel ratio of to add suffienct padding to the bars and edge of the chart
endFillColor
Type: color
Default: #73B0D7
Color for the Vertical Waterfall end bars
exposeLabels
Type: select
Default: [object Object]
If true, each bar's value will always be visible
fillByValue
Type: boolean
Default: false
Determines if the fill bar colors by series or by value
generalSeparatorColor
Type: color
Default: #FFFFFF
Color is used to to distinguish bar segments that are filled with the washout color
generalWashoutColor
Type: color
Default: #E4E5E5
Color is used to fill bar segments that are not being highlighted on events such as mouse hover
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: 250
Units: px
highlightKey
Type: string
Default: series
The key on which to highlight the bar on mouseover. Valid keys are "label", "series", or "value"
labelFormat
Type: function
Default: function (d) { return i18n.summaryNumber(d.value); }
Format for the bar labels
labelPosition
Type: string
Default: inline
When orientation is 'horizontal', this config will be used to place labels inline with the bars, or on top of the bar.Valid options are: inline and top. inline is the default.
layout
Type: string
Default: single
Determines if the chart is stacked or grouped, waterfall or single bars
minimumBarWidth
Type: number
Default: 3
The minimum width for the bars. Used to check the number of data points
negativeFillColor
Type: color
Default: #E4584F
Color for the Vertical Waterfall negative value bars
orientation
Type: string
Default: vertical
Determines if the orientation is vertical or horizontal
positiveFillColor
Type: color
Default: #80C25D
Color for the Vertical Waterfall positive value bars
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showBarLabels
Type: boolean
Default: true
Determines whether the bar label should be displayed on hover
showClip
Type: boolean
Default: true
Hide bars that extend past chart bounds
showMeridian
Type: boolean
Default: false
Determines whether to show the center
showTooltip
Type: boolean
Default: true
textFontFamily
Type: string
Default: Open Sans
textSize
Type: number
Default: 12
Units: px
tooltipBackgroundColor
Type: color
Default: #555555
Background color of the tooltip
tooltipContent
Type: function
Default: function (d) { return { value: i18n.summaryNumber(d.value), label: d.series }; }
Format for the Tooltip content. Valid option requires an object with a value and a label.
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
transitionDelay
Type: function
Default: function (d, i) { return i * (_Chart.c('transitionDuration') / _labels.length); }
The delay function for the transitions
transitionDuration
Type: number
Default: 300
The duration for the transitions
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 100
The plot area width
Data Definition
ExtraData
Type: string
Default validate:
function (row) { return _Chart.c('hasSeriesData') ? this.accessor(row) !== undefined : true; }
Default accessor:
function (row) {
return !_Chart.c('hasSeriesData') ?
row[2] && row[2] !== '' ? String(row[2]) : undefined : _Chart.a('Label')(row);
}
Label
Type: string
Default validate:
function (row) { return this.accessor(row) !== undefined; }
Default accessor:
function (row) { return row[0] && row[0] !== '' ? String(row[0]) : undefined; }
Series
Type: string
Default validate:
function (row) { return _Chart.c('hasSeriesData') ? this.accessor(row) !== undefined : true; }
Default accessor:
function (row) {
return _Chart.c('hasSeriesData') ?
row[2] && row[2] !== '' ? String(row[2]) : undefined : _Chart.a('Label')(row);
}
Value
Type: number
Default validate:
function (row) { return !isNaN(this.accessor(row)); }
Default accessor:
function (row) { return Number(row[1]); }
Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
dispatch:click
External Events
external:mouseover
external:mouseout
external:highlight
external:unhighlight
Example
//----------------------------------------------------------------------------------
// Setup some fake data
//----------------------------------------------------------------------------------
var data1 = [
['a', 2, 'z'],
['a', 3, 'y'],
['b', 4, 'z'],
['b', 5, 'y'],
['c', 6, 'z'],
['c', 7, 'y']
];
var data3 = [
['a', 2, 'z'],
['a', 3, 'y'],
['a', 4, 'x'],
['b', -2, 'z'],
['b', -4, 'y'],
['b', -6, 'x'],
['c', 6, 'z'],
['c', 7, 'y'],
['c', 8, 'x'],
['d', 8, 'z'],
['d', 7, 'y'],
['d', 6, 'x'],
];
var data2 = [
['a', 2],
['b', 4],
['d', 4],
['e', 4],
['f', 4],
['g', 4],
['h', 4],
['c', 6],
];
var data4 = [
['a', -2],
['b', 4],
['c', 8],
['d', 6]
];
var data5 = [
['a', 2, 'series A'],
['b', 4, 'series A'],
['d', 4, 'series A'],
['e', 4, 'series B'],
['f', 4, 'series B'],
['g', 4, 'series B'],
['h', 4, 'series C'],
['c', 6, 'series C'],
];
var data6 = [
['a', 2, 'series A'],
['b', 4, 'series B'],
['c', 8, 'series C'],
['d', 6, 'series D']
];
var data7 = [
['LY',2000, '$153,769'],
['TRAFFIC',400, '%'],
['CONVERSION',1000, 'ppt'],
['UPT',3000, '+'],
['AUR',-6000, '%'],
['TY',400, '