Histogram

Displays a simple bar histogram based upon an array of data objects passed in the data config.

Configs

87

Common

listenersEvents

Other

data: Object[]

An array of data objects used to drive the histogram. The property/properties used are defined in the series option.

getBarClass: function

A Function which returns a CSS class name to add to a rectangle element representing a "bar"-type series value. The following parameters are passed:

ParameterTypeDescription
seriesHistogramSeries

The series being rendered

domConfigDomConfig

The rectangle element configuration object

datumObject

The datum being rendered

indexNumber

The index of the datum being rendered

Returns: String -

CSS class name of the rectangle element

getBarDOMConfig: function

A Function which if provided should return a DOM configuration object for a bar (a RECT element representing a single "bar"-type value). The function accepts a default prepared DOM configuration in an argument which then can be processed and returned.

The following parameters are passed to the function:

ParameterTypeDescription
seriesHistogramSeries

The series being rendered

domConfigDomConfig

The rectangle DOM configuration object

datumObject

The datum being rendered

indexNumber

The index of the datum being rendered

Returns: Object -

Resulting DOM configuration object. If no value returned the bar is not displayed.

getBarText: function

A Function which returns the text to render inside a bar. The following parameters are passed:

ParameterTypeDescription
datumObject

The datum being rendered

indexNumber

The index of the datum being rendered

seriesHistogramSeries

The series (provided if singleTextForAllBars is false)

Returns: String -

Text to render in the bar.

A Function which if provided returns DOM configuration for a bar text (a TEXT element accompanying a single "bar"-type value). The function accepts a default prepared DOM configuration in the first argument which then can be processed and returned.

The following parameters are passed to the function:

ParameterTypeDescription
domConfigDomConfig

The text element DOM configuration object

datumObject

The datum being rendered

indexNumber

The index of the datum being rendered

seriesHistogramSeries

The series (provided if singleTextForAllBars is false)

Returns: Object -

Resulting DOM configuration object. If no value returned the text is not displayed.

getBarTip: function

A Function which returns the tooltip text to display when hovering a bar. The following parameters are passed:

ParameterTypeDescription
seriesHistogramSeries

The series being rendered

domConfigDomConfig

The rectangle configuration object

datumObject

The datum being rendered

indexNumber

The index of the datum being rendered

Returns: String -

Tip for the bar.

getOutlineClass: function

A Function which returns a CSS class name to add to a path element built for an outline type series. The following parameters are passed:

ParameterTypeDescription
seriesHistogramSeries

The series being rendered

dataObject[]

The series data

Returns: String -

CSS class name of the path element

A Function which if provided should return a DOM configuration object for a path element built for an outline type series. The function accepts a default prepared DOM configuration in an argument which then can be processed and returned.

The following parameters are passed to the function:

ParameterTypeDescription
seriesHistogramSeries

The series being rendered

domConfigDomConfig

The path element DOM configuration object

dataObject[]

The series data

Returns: Object -

Resulting DOM configuration object. If no value returned the path is not displayed.

omitZeroHeightBars: Boolean= false

By default, all bars are rendered, even those with zero height. Configure this as true to omit zero height bars.

series: Object<String, HistogramSeries>

Object enumerating data series for the histogram. The object keys are treated as series identifiers and values are objects that can contain the following properties:

  • type A String, either 'bar' or 'outline'
  • field A String, the name of the property to use from the data objects in the data option. If the value is omitted the series identifier is used as the property name.
singleTextForAllBars: Boolean= true

By default, the histogram calls getBarText once per each datum. So the function is supposed to output all the series values the way it needs. Configure this as false to call the function for each series value if you need to display the values separately or having different styling.

topValue: Number

By default, the bars are scaled based upon the detected max value across all the series. A specific top value to represent the 100% height may be configured.

values: Number[]

The values to represent in bar form.

columnWidget
rtlRTL
spanWidget

Accessibility

ariaLabelWidget
keyMapKeyMap

CSS

clsWidget
colorWidget
htmlClsWidget
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Misc

dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Scrolling

Properties

65

Class hierarchy

isHistogram: Boolean= truereadonly
Identifies an object as an instance of Histogram class, or subclass thereof.
isHistogram: Boolean= truereadonlystatic
Identifies an object as an instance of Histogram class, or subclass thereof.
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isWidgetWidget

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget

Other

$namestaticWidget
columnWidget
rtlRTL
spanWidget
typestaticWidget

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget

Functions

58

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
triggerEvents
unEvents
unmaskWidget

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

14
catchAllEvents
destroyEvents
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget

Event handlers

14

Typedefs

7

An object representing a series settings.

ParameterTypeDescription
typebar | outline

The series type specifying how it is rendered, as solid bars or outlines.

fieldString

The name of the property to read value from. By default, this matches the series identifier.

stretchBoolean

Provide true to stretch the series bars to take the whole vertical space Applicable to bar type series only.

idString

The series identifier. When configuring the series this value is automatically taken from the key name the series is provided. In the example code below, the series id will be set to salary:

series : {
    salary : {
        type : 'bar'
    },
    ...
}
AlignSpecWidget
ColorWidget

CSS variables

45
NameDescription
--b-histogram-bar-border-widthBar border-width, overridden by specific series (0-5)
--b-histogram-bar0-border-widthBar 0 border-width
--b-histogram-bar1-border-widthBar 1 border-width
--b-histogram-bar2-border-widthBar 2 border-width
--b-histogram-bar3-border-widthBar 3 border-width
--b-histogram-bar4-border-widthBar 4 border-width
--b-histogram-bar5-border-widthBar 5 border-width
--b-histogram-transition-durationBar transition duration
--b-histogram-bar-legend-font-sizeBar legend font size
--b-histogram-bar-colorBar fill color, overridden by specific series (0-5)
--b-histogram-bar-border-colorBar stroke color, overridden by specific series (0-5)
--b-histogram-bar0-colorBar 0 fill color
--b-histogram-bar0-border-colorBar 0 stroke color
--b-histogram-bar1-colorBar 1 fill color
--b-histogram-bar1-border-colorBar 1 stroke color
--b-histogram-bar2-colorBar 2 fill color
--b-histogram-bar2-border-colorBar 2 stroke color
--b-histogram-bar3-colorBar 3 fill color
--b-histogram-bar3-border-colorBar 3 stroke color
--b-histogram-bar4-colorBar 4 fill color
--b-histogram-bar4-border-colorBar 4 stroke color
--b-histogram-bar5-colorBar 5 fill color
--b-histogram-bar5-border-colorBar 5 stroke color
--b-histogram-exceeds-top-bar-colorBar exceeds top fill color
--b-histogram-outline-colorHistogram outline color

Inherited