@domoinc/ca-progress-bar-with-text v6.0.1

CAProgressBarWithText

Configuration Options

chartName

Type: string
Default: "CAProgressBarWithText"

Name of chart for reporting

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.

neutralStroke

Type: color
Default: "#D7D9DA"

Border color for each element

notFilledColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is empty

prefix

Type: string
Default: ""

Text added before the number value

primaryFill

Type: color
Default: "#73B0D7"

Fill color for each element

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"

Font type for the value

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 widget

Data Definition

MaxValue

Type: number

Default validate:

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

Default accessor:

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

Name

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 parseFloat(line[1]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Sales', 76, 100]
];

var aHeight = 42;
var aWidth = 424;

//Initialze the widget
var chart = d3.select('#vis svg')
  .append('g')
  .attr('transform', 'translate(38,190)')
  .chart('CAProgressBarWithText')
  .c({
    width: aWidth,
    height: aHeight
  });

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