BulletChart

live example

Explore the API in the live example.

api reference

BulletChart(name[, parent])

The bullet chart widget. The chart extends the following components:

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

BulletChart.forecast([forecast])

Sets the forecast value in units of the bar's value.

Parameters

Name	Type	Description
forecast	number	optionalForecast value in units of the bar value. Default value is `1`.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set forecast to the triple of the value.
const bullet = dalian.BulletChart('my-chart')
  .forecast(3)
  .render()

// Reset forecast to default.
bullet.forecast()
  .render()

BulletChart.label(label)

Sets the chart label.

Parameters

Name	Type	Description
label	string	Label to set for the chart.

Returns

BulletChart

Reference to the BulletChart API.

Examples

const bullet = dalian.BulletChart('my-chart')
  .label('Revenue')
  .render()

BulletChart.rangeColor([color])

Sets the color for the ranges.

Parameters

Name	Type	Description
color	string	optionalColor to set for the ranges. Default value is `#888`.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set range color to red.
const bullet = dalian.BulletChart('my-chart')
  .rangeColor('red')
  .render()

// Reset range color to default.
bullet.rangeColor()
  .render()

BulletChart.ranges()

Sets the qualitative ranges.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set poor, satisfactory, good ranges to (0, 60), (60, 90), (90, 100).
const bullet = dalian.BulletChart('my-chart')
  .ranges([0, 60, 90, 100])
  .render()

// Reset ranges to default.
bullet.ranges()
  .render()

BulletChart.target(target)

Sets the target value.

Parameters

Name	Type	Description
target	number	Target value to set.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set target to 80.
const bullet = dalian.BulletChart('my-chart')
  .target(80)
  .render()

BulletChart.thickness([thickness])

Sets the thickness of the range.

Parameters

Name	Type	Description
thickness	number	optionalThickness to set. Default value is `30`.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set thickness to 20px.
const bullet = dalian.BullestChart('my-chart')
  .thickness(20)
  .render()

// Reset thickness to default.
bullet.thickness()
  .render()

BulletChart.unit(unit)

Sets the unit description.

Parameters

Name	Type	Description
unit	string	Unit description.

Returns

BulletChart

Reference to the BulletChart API.

Examples

const bullet = dalian.BulletChart('my-chart')
  .unit('USD')
  .render()

BulletChart.value([value])

Sets the bar's value.

Parameters

Name	Type	Description
value	number	optionalValue to set the bar to. Default value is `0`.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set value to 50.
const bullet = dalian.BulletChart('my-chart')
  .value(50)
  .render()

// Reset value to default.
bullet.value()
  .render()

BulletChart.valueColor([color])

Sets the color of the bar, forecast and target. Note that the forecast bar's color is a lightened version of the value color.

Parameters

Name	Type	Description
color	string	optionalColor to set for the bar, forecast and target. Default value is `#000`.

Returns

BulletChart

Reference to the BulletChart API.

Examples

// Set value, forecast and target color to blue.
const bullet = dalian.BulletChart('my-chart')
  .valueColor('blue')
  .render()

// Reset value color to default.
bullet.valueColor()
  .render()