@domoinc/bar-gauge

BarGauge

Bar gauge with label and value

Configuration Options

alternateTextColor

Type: color
Default: "#333333"

Color of the number value when outside of the gauge

barColor

Type: color
Default: "#73B0D7"

Color of the gauge

barStartPos

Type: number
Default: 0

Sets starting pos after labels for left-alinging bars

barTextPadding

Type: number
Default: 5
Units: px

Padding between edge of bar and text

chartName

Type: string
Default: "BarGauge"

Name of chart for reporting

height

Type: number
Default: 30

Height of the gauge

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: boolean
Default: true

Labels will be at the start of the bar, false means it will be at the end of the bar

labelTextColor

Type: color
Default: "#8A8D8E"

labelTextSize

Type: number
Default: 14
Units: px

Styles for all bar labels showing values

leftToRight

Type: boolean
Default: true

Bar transitions left to right, false means transitions right to left

maxWidth

Type: number
Default: null

Max width of all bar gauges if more than one is called

prefix

Type: string
Default: ""

String to be appended before the value number

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

suffix

Type: string
Default: ""

String to be appended after the value number

textFontFamily

Type: string
Default: "Open Sans"

updateSizeableConfigs

Type: boolean
Default: true

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

valueTextColor

Type: color
Default: "#333333"

Color of the number value

valueTextSize

Type: number
Default: 14
Units: px

Text size of the number indicators inside and outside of the gauge

width

Type: number
Default: 100

Width of the gauge

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

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 = [
  ['PUSHED', 200]
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr('height', '500px')
  .attr('width', '500px')
  .append('g')
  .attr('transform', 'translate(0,0)')
  .chart('BarGauge')
  .c({
    width: 400,
    height: 50,
    barStartPos: 75,
    // min: 50,
    // labelTextColor: 'red'
  });

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