@nebula.js/sn-bullet-chart
Version:
Visualize measures or measure values as bars with multiple axes and user-defined ranges. The ranges provide context to the bars which makes them easier to interpret.
398 lines (265 loc) • 17.2 kB
Markdown
# API Reference
- [properties](#properties) : <code>object</code>
- [.version](#properties.version) : <code>string</code>
- [.color](#properties.color) : <code>object</code>
- [.auto](#properties.color.auto) : <code>boolean</code>
- [.mode](#properties.color.mode)
- [.bar](#properties.color.bar) : [<code>paletteColor</code>](#paletteColor)
- [.target](#properties.color.target) : [<code>paletteColor</code>](#paletteColor)
- [.dimensionAxis](#properties.dimensionAxis) : <code>object</code>
- [.dock](#properties.dimensionAxis.dock) : <code>'near'</code> \| <code>'far'</code>
- [.label](#properties.dimensionAxis.label) : <code>'auto'</code> \| <code>'horizontal'</code> \| <code>'tilted'</code>
- [.show](#properties.dimensionAxis.show) : <code>'all'</code> \| <code>'labels'</code> \| <code>'title'</code> \| <code>'none'</code>
- [.footnote](#properties.footnote) : <code>string</code> \| <code>StringExpression</code>
- [.gridLine](#properties.gridLine) : <code>object</code>
- [.auto](#properties.gridLine.auto) : <code>boolean</code>
- [.spacing](#properties.gridLine.spacing) : <code>0</code> \| <code>1</code> \| <code>2</code> \| <code>3</code>
- [.measureAxis](#properties.measureAxis) : <code>object</code>
- [.commonAxis](#properties.measureAxis.commonAxis) : <code>boolean</code>
- [.commonRange](#properties.measureAxis.commonRange) : <code>boolean</code>
- [.dock](#properties.measureAxis.dock) : <code>'near'</code> \| <code>'far'</code>
- [.show](#properties.measureAxis.show) : <code>'all'</code> \| <code>'labels'</code> \| <code>'title'</code> \| <code>'none'</code>
- [.spacing](#properties.measureAxis.spacing) : <code>number</code>
- [.orientation](#properties.orientation) : <code>'vertical'</code> \| <code>'horizontal'</code>
- [.qHyperCubeDef](#properties.qHyperCubeDef) ⇐ <code>HyperCubeDef</code>
- [.qDimensions](#properties.qHyperCubeDef.qDimensions) : [<code>Array.<DimensionProperties></code>](#DimensionProperties)
- [.qMeasures](#properties.qHyperCubeDef.qMeasures) : [<code>Array.<MeasureProperties></code>](#MeasureProperties)
- [.qSuppressZero](#properties.qHyperCubeDef.qSuppressZero) : <code>boolean</code>
- [.qSuppressMissing](#properties.qHyperCubeDef.qSuppressMissing) : <code>boolean</code>
- [.scrollbar](#properties.scrollbar) : <code>'bar'</code> \| <code>'none'</code>
- [.scrollStartPos](#properties.scrollStartPos) : <code>number</code>
- [.showDetails](#properties.showDetails) : <code>boolean</code>
- [.showTitles](#properties.showTitles) : <code>boolean</code>
- [.subtitle](#properties.subtitle) : <code>string</code> \| <code>StringExpression</code>
- [.title](#properties.title) : <code>string</code> \| <code>StringExpression</code>
- [.tooltip](#properties.tooltip) : <code>object</code>
- [.auto](#properties.tooltip.auto) : <code>boolean</code>
- [.hideBasic](#properties.tooltip.hideBasic) : <code>boolean</code>
- [.title](#properties.tooltip.title) : <code>string</code> \| <code>StringExpression</code>
- [.description](#properties.tooltip.description) : <code>string</code> \| <code>StringExpression</code>
- [.chart](#properties.tooltip.chart) : [<code>MasterVisualizationChart</code>](#MasterVisualizationChart)
- [.imageComponents](#properties.tooltip.imageComponents) : [<code>Array.<ImageComponent></code>](#ImageComponent)
---
<a name="properties.version"></a>
### properties.version : <code>string</code>
Current version of this generic object definition
**Kind**: static property of [<code>properties</code>](#properties)
<a name="properties.color"></a>
### properties.color : <code>object</code>
Color settings.
Most color options for visualizations are set in the color object in the options. You activate custom coloring by setting `"auto": false` which turns off auto-coloring.
If `"auto": true`, no other properties need to be defined in the color object.
**Kind**: static property of [<code>properties</code>](#properties)
- [.color](#properties.color) : <code>object</code>
- [.auto](#properties.color.auto) : <code>boolean</code>
- [.mode](#properties.color.mode)
- [.bar](#properties.color.bar) : [<code>paletteColor</code>](#paletteColor)
- [.target](#properties.color.target) : [<code>paletteColor</code>](#paletteColor)
<a name="properties.color.auto"></a>
#### color.auto : <code>boolean</code>
Set to use automatic coloring.
When `"auto": true`, color settings are based on the visualization used.
**Kind**: static property of [<code>color</code>](#properties.color)
**Default**: <code>true</code>
<a name="properties.color.mode"></a>
#### color.mode
`primary`: a single color (by default blue) for all bar items and (by default black) for all target items in the bullet chart.
**Kind**: static property of [<code>color</code>](#properties.color)
**Default**: <code>primary</code>
<a name="properties.color.bar"></a>
#### color.bar : [<code>paletteColor</code>](#paletteColor)
The paletteColor object is used to define the color of bar.
**Kind**: static property of [<code>color</code>](#properties.color)
**Default**: <code>{ index: 6 }</code>
<a name="properties.color.target"></a>
#### color.target : [<code>paletteColor</code>](#paletteColor)
The target object is used to define the color of target.
**Kind**: static property of [<code>color</code>](#properties.color)
**Default**: <code>{ index: -1, color: '#000000' }</code>
<a name="properties.dimensionAxis"></a>
### properties.dimensionAxis : <code>object</code>
Dimension axis settings.
**Kind**: static property of [<code>properties</code>](#properties)
- [.dimensionAxis](#properties.dimensionAxis) : <code>object</code>
- [.dock](#properties.dimensionAxis.dock) : <code>'near'</code> \| <code>'far'</code>
- [.label](#properties.dimensionAxis.label) : <code>'auto'</code> \| <code>'horizontal'</code> \| <code>'tilted'</code>
- [.show](#properties.dimensionAxis.show) : <code>'all'</code> \| <code>'labels'</code> \| <code>'title'</code> \| <code>'none'</code>
<a name="properties.dimensionAxis.dock"></a>
#### dimensionAxis.dock : <code>'near'</code> \| <code>'far'</code>
Axis docking position
**Kind**: static property of [<code>dimensionAxis</code>](#properties.dimensionAxis)
**Default**: <code>"near"</code>
<a name="properties.dimensionAxis.label"></a>
#### dimensionAxis.label : <code>'auto'</code> \| <code>'horizontal'</code> \| <code>'tilted'</code>
Label orientation
**Kind**: static property of [<code>dimensionAxis</code>](#properties.dimensionAxis)
**Default**: <code>"auto"</code>
<a name="properties.dimensionAxis.show"></a>
#### dimensionAxis.show : <code>'all'</code> \| <code>'labels'</code> \| <code>'title'</code> \| <code>'none'</code>
Labels and title
**Kind**: static property of [<code>dimensionAxis</code>](#properties.dimensionAxis)
**Default**: <code>"all"</code>
<a name="properties.footnote"></a>
### properties.footnote : <code>string</code> \| <code>StringExpression</code>
Visualization footnote.
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>""</code>
<a name="properties.gridLine"></a>
### properties.gridLine : <code>object</code>
Grid lines settings. Used only when using commom axis.
**Kind**: static property of [<code>properties</code>](#properties)
- [.gridLine](#properties.gridLine) : <code>object</code>
- [.auto](#properties.gridLine.auto) : <code>boolean</code>
- [.spacing](#properties.gridLine.spacing) : <code>0</code> \| <code>1</code> \| <code>2</code> \| <code>3</code>
<a name="properties.gridLine.auto"></a>
#### gridLine.auto : <code>boolean</code>
Automatic grid line spacing.
**Kind**: static property of [<code>gridLine</code>](#properties.gridLine)
**Default**: <code>true</code>
<a name="properties.gridLine.spacing"></a>
#### gridLine.spacing : <code>0</code> \| <code>1</code> \| <code>2</code> \| <code>3</code>
Grid line spacing. Used only when auto is set to false.
**Kind**: static property of [<code>gridLine</code>](#properties.gridLine)
**Default**: <code>2</code>
<a name="properties.measureAxis"></a>
### properties.measureAxis : <code>object</code>
Measure axis settings.
**Kind**: static property of [<code>properties</code>](#properties)
- [.measureAxis](#properties.measureAxis) : <code>object</code>
- [.commonAxis](#properties.measureAxis.commonAxis) : <code>boolean</code>
- [.commonRange](#properties.measureAxis.commonRange) : <code>boolean</code>
- [.dock](#properties.measureAxis.dock) : <code>'near'</code> \| <code>'far'</code>
- [.show](#properties.measureAxis.show) : <code>'all'</code> \| <code>'labels'</code> \| <code>'title'</code> \| <code>'none'</code>
- [.spacing](#properties.measureAxis.spacing) : <code>number</code>
<a name="properties.measureAxis.commonAxis"></a>
#### measureAxis.commonAxis : <code>boolean</code>
When set to true, use common axis.
**Kind**: static property of [<code>measureAxis</code>](#properties.measureAxis)
**Default**: <code>false</code>
<a name="properties.measureAxis.commonRange"></a>
#### measureAxis.commonRange : <code>boolean</code>
When set to true, use common range.
**Kind**: static property of [<code>measureAxis</code>](#properties.measureAxis)
**Default**: <code>false</code>
<a name="properties.measureAxis.dock"></a>
#### measureAxis.dock : <code>'near'</code> \| <code>'far'</code>
Axis docking position
**Kind**: static property of [<code>measureAxis</code>](#properties.measureAxis)
**Default**: <code>"near"</code>
<a name="properties.measureAxis.show"></a>
#### measureAxis.show : <code>'all'</code> \| <code>'labels'</code> \| <code>'title'</code> \| <code>'none'</code>
Labels and title
**Kind**: static property of [<code>measureAxis</code>](#properties.measureAxis)
**Default**: <code>"all"</code>
<a name="properties.measureAxis.spacing"></a>
#### measureAxis.spacing : <code>number</code>
Axis scale
**Kind**: static property of [<code>measureAxis</code>](#properties.measureAxis)
**Default**: <code>1</code>
<a name="properties.orientation"></a>
### properties.orientation : <code>'vertical'</code> \| <code>'horizontal'</code>
Orientation setting.
If vertical, the dimension axis can only be docked on bottom or top and measure axis on left or right.
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>"vertical"</code>
<a name="properties.qHyperCubeDef"></a>
### properties.qHyperCubeDef ⇐ <code>HyperCubeDef</code>
Extends `HyperCubeDef`, see Engine API: `HyperCubeDef`.
**Kind**: static property of [<code>properties</code>](#properties)
**Extends**: <code>HyperCubeDef</code>
- [.qHyperCubeDef](#properties.qHyperCubeDef) ⇐ <code>HyperCubeDef</code>
- [.qDimensions](#properties.qHyperCubeDef.qDimensions) : [<code>Array.<DimensionProperties></code>](#DimensionProperties)
- [.qMeasures](#properties.qHyperCubeDef.qMeasures) : [<code>Array.<MeasureProperties></code>](#MeasureProperties)
- [.qSuppressZero](#properties.qHyperCubeDef.qSuppressZero) : <code>boolean</code>
- [.qSuppressMissing](#properties.qHyperCubeDef.qSuppressMissing) : <code>boolean</code>
<a name="properties.qHyperCubeDef.qDimensions"></a>
#### qHyperCubeDef.qDimensions : [<code>Array.<DimensionProperties></code>](#DimensionProperties)
**Kind**: static property of [<code>qHyperCubeDef</code>](#properties.qHyperCubeDef)
<a name="properties.qHyperCubeDef.qMeasures"></a>
#### qHyperCubeDef.qMeasures : [<code>Array.<MeasureProperties></code>](#MeasureProperties)
**Kind**: static property of [<code>qHyperCubeDef</code>](#properties.qHyperCubeDef)
<a name="properties.qHyperCubeDef.qSuppressZero"></a>
#### qHyperCubeDef.qSuppressZero : <code>boolean</code>
**Kind**: static property of [<code>qHyperCubeDef</code>](#properties.qHyperCubeDef)
**Default**: <code>false</code>
<a name="properties.qHyperCubeDef.qSuppressMissing"></a>
#### qHyperCubeDef.qSuppressMissing : <code>boolean</code>
**Kind**: static property of [<code>qHyperCubeDef</code>](#properties.qHyperCubeDef)
**Default**: <code>true</code>
<a name="properties.scrollbar"></a>
### properties.scrollbar : <code>'bar'</code> \| <code>'none'</code>
Sets the style of the scroll bar
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>"bar"</code>
<a name="properties.scrollStartPos"></a>
### properties.scrollStartPos : <code>number</code>
Scroll Alignment. If 0, then the scrollbar will start at the left/top of the chart,
if 1 it starts at the right/bottom of the chart. Generally decides if the scroll
starts at the beginning or end of the data
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>0</code>
<a name="properties.showDetails"></a>
### properties.showDetails : <code>boolean</code>
Show visualization details toggle
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>true</code>
<a name="properties.showTitles"></a>
### properties.showTitles : <code>boolean</code>
Show title for the visualization
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>true</code>
<a name="properties.subtitle"></a>
### properties.subtitle : <code>string</code> \| <code>StringExpression</code>
Visualization subtitle.
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>""</code>
<a name="properties.title"></a>
### properties.title : <code>string</code> \| <code>StringExpression</code>
Visualization title.
**Kind**: static property of [<code>properties</code>](#properties)
**Default**: <code>""</code>
<a name="properties.tooltip"></a>
### properties.tooltip : <code>object</code>
Custom tooltip properties
**Kind**: static property of [<code>properties</code>](#properties)
- [.tooltip](#properties.tooltip) : <code>object</code>
- [.auto](#properties.tooltip.auto) : <code>boolean</code>
- [.hideBasic](#properties.tooltip.hideBasic) : <code>boolean</code>
- [.title](#properties.tooltip.title) : <code>string</code> \| <code>StringExpression</code>
- [.description](#properties.tooltip.description) : <code>string</code> \| <code>StringExpression</code>
- [.chart](#properties.tooltip.chart) : [<code>MasterVisualizationChart</code>](#MasterVisualizationChart)
- [.imageComponents](#properties.tooltip.imageComponents) : [<code>Array.<ImageComponent></code>](#ImageComponent)
<a name="properties.tooltip.auto"></a>
#### tooltip.auto : <code>boolean</code>
Toggle for using custom tooltip or regular tooltip
**Kind**: static property of [<code>tooltip</code>](#properties.tooltip)
**Default**: <code>true</code>
<a name="properties.tooltip.hideBasic"></a>
#### tooltip.hideBasic : <code>boolean</code>
Toggle for hiding basic information from custom tooltip
**Kind**: static property of [<code>tooltip</code>](#properties.tooltip)
**Default**: <code>false</code>
<a name="properties.tooltip.title"></a>
#### tooltip.title : <code>string</code> \| <code>StringExpression</code>
Custom tooltip title.
**Kind**: static property of [<code>tooltip</code>](#properties.tooltip)
**Default**: <code>""</code>
<a name="properties.tooltip.description"></a>
#### tooltip.description : <code>string</code> \| <code>StringExpression</code>
Custom tooltip description.
**Kind**: static property of [<code>tooltip</code>](#properties.tooltip)
**Default**: <code>""</code>
<a name="properties.tooltip.chart"></a>
#### tooltip.chart : [<code>MasterVisualizationChart</code>](#MasterVisualizationChart)
The chart object is used to define the chart displayed by the custom tooltip.
**Kind**: static property of [<code>tooltip</code>](#properties.tooltip)
**Default**: <code>undefined</code>
<a name="properties.tooltip.imageComponents"></a>
#### tooltip.imageComponents : [<code>Array.<ImageComponent></code>](#ImageComponent)
The imageComponents objects are used to define the images displayed by the custom tooltip.
**Kind**: static property of [<code>tooltip</code>](#properties.tooltip)
**Default**: <code>undefined</code>
# Definitions
<a name="AttributeExpressionProperties"></a>
## AttributeExpressionProperties : [<code>AttributeExpressions</code>](#AttributeExpressions) \| [<code>CustomTooltipAttributes</code>](#CustomTooltipAttributes)
**Kind**: global typedef