@domoinc/stacked-bar-gauge v5.1.2

StackedBarGauge

Configuration Options

badValueThreshold

Type: number
Default: 33

Any value above this number indicates something is bad

chartName

Type: string
Default: "StackedBarGauge"

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"]]

Primary colors used to represent series data

colorScale

Type: scale
Default: ""

Color scale for chart

gaugeBadFill

Type: color
Default: "#F27E79"

Fill color that indicates something is bad

gaugeGoodFill

Type: color
Default: "#91D0BC"

Fill color that indicates something is good

gaugeNeutralFill

Type: color
Default: "#FCCF84"

Fill color that indicates something is neutral

generalNotFilledColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is empty

generalWashoutColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is not highlighted

goodValueThreshold

Type: number
Default: 67

Any value above this number indicates something is good

height

Type: number
Default: 400
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.

isStackedGauge

Type: boolean
Default: true

Flag to determine if gauge is stacked or single

manualColor

Type: boolean
Default: true

Use either the color Domo theme or a custom color set by the 'Gauge Color' config

maxValuePosition

Type: select
Default: {"name":"Outside Gauge","value":false}

Set the position of the maximum value indicator

orientation

Type: undefined
Default: "horizontal"

Determines if gauge is vertical or horizontal

prefix

Type: string
Default: "$"

Text added before the number value

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showMaxValue

Type: select
Default: {"name":"Show","value":true}

Show or hide the maximum value indicator

showTooltip

Type: select
Default: {"name":"Hide","value":false}

Show or hide the tooltip

showValueLabel

Type: select
Default: {"name":"Show","value":true}

Show or hide the number value

suffix

Type: string
Default: ""

Text added after the number value

textColor

Type: color
Default: "#555555"

Font color for the text

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

textSize

Type: number
Default: 18
Units: px

Font size for the text

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color for the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip text

tooltipTextSize

Type: number
Default: 12
Units: px

Font size for the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

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

valuePosition

Type: select
Default: {"name":"Inside Gauge","value":true}

Set the position of the number value

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

quota

Type: number

Default validate:

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

Default accessor:

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

series

Type: string

Default validate:

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

Default accessor:

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

value

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

dispatch:click

External Events

Example

// Team, Current Sales, Sales Quota
var data = [
  ['North', 70, 100],
  ['South', 36, 100],
  ['East', 51, 100],
  ['West', 18, 100]
];

var HorizontalStacked = {
  chartName: 'HorizontalStacked',
  orientation: 'horizontal',
  width: 400,
  height: 100,
  isStackedGauge: true,
  manualColor: false,
};
var VerticalStacked = {
  chartName: 'VerticalStacked',
  orientation: 'vertical',
  width: 100,
  height: 400,
  isStackedGauge: true,
  manualColor: false,
};
var HorizontalSingle = {
  chartName: 'HorizontalSingle',
  orientation: 'horizontal',
  width: 400,
  height: 100,
  isStackedGauge: false,
  manualColor: true,
};
var VerticalSingle = {
  chartName: 'VerticalSingle',
  orientation: 'vertical',
  width: 100,
  height: 400,
  isStackedGauge: false,
  manualColor: true,
};

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr('height', '500')
  .attr('width', '500')
  .append('g')
  .attr('transform', 'translate(200,50)')
  // .attr('transform', 'translate(35,200)')
  .chart('StackedBarGauge')
  // .c(HorizontalStacked);
  // .c(VerticalStacked);
  // .c(HorizontalSingle);
  .c(VerticalSingle);

chart._notifier.showMessage(true);

//Render the chart with data here
chart.draw(data);