@domoinc/horizontal-multi-series-bars v4.0.3
HorizontalMultiSeriesBars
Multiple horizontal bars with labels and values
Configuration Options
barStartPos
Type: number
Default: 75
Units: px
Set the bar distance from the start of the labels
barTextPadding
Type: number
Default: 5
Units: px
The space between the gauge and label
chartName
Type: string
Default: "HorizontalMultiSeriesBars"
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
chartSecondarySeriesColors
Type: colorArray
Default: ["#4E8CBA","#D9EBFD","#31689B","#D9EBFD","#D9EBFD","#559E38","#DDF4BA","#387B26","#DDF4BA","#DDF4BA","#E45621","#FDECAD","#A43724","#FDECAD","#FDECAD","#FDECAD"]
The secondary colors used to represent series data
gaugeGap
Type: number
Default: 10
Units: px
The space between the gauges
gaugeHeight
Type: number
Default: 30
Units: px
Height of each gauge
height
Type: number
Default: 100
Units: px
Height of the widget
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.
labelBeforeBar
Type: select
Default: {"name":"Before Gauge","value":true}
Set the label position before or after the gauge
labelTextColor
Type: color
Default: "#8A8D8E"
Font color for the labels
labelTextSize
Type: number
Default: 14
Units: px
Font size for the labels
leftToRight
Type: select
Default: {"name":"Left to Right","value":true}
Set the animation direction for the gauges
prefix
Type: string
Default: "$"
Text added before the number value
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
suffix
Type: string
Default: ""
Text added after the number value
textFontFamily
Type: string
Default: "Open Sans"
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueTextSize
Type: number
Default: 14
Units: px
Font size for the values
width
Type: number
Default: 700
Units: px
Width of the widget
Data Definition
Label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }
Default accessor:
function (line) { return line[0] === undefined ? undefined : 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]); }
Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
External Events
external:mouseover
external:mouseout
Example
//Setup some fake data
var data = [
['North', 140],
['South', 200],
['East', 250],
['West', 170]
];
var chart = d3.select('#vis')
.append('svg')
.attr('height', 500)
.attr('width', 500)
.append('g')
.attr('transform', 'translate(50,172.5)')
.chart('HorizontalMultiSeriesBars')
.c({
width: 400,
height: 25,
})
//Render the chart with data
// chart._notifier.showMessage(false);
chart.draw(data);
setTimeout(function () {
chart.trigger('external:mouseover', {data: data[0]});
}, 2000);
setTimeout(function () {
chart.trigger('external:mouseout');
}, 3000);
setTimeout(function () {
chart.trigger('external:mouseover', {data: data[1]});
}, 3000);
setTimeout(function () {
chart.trigger('external:mouseout');
}, 4000);