API: Bar

Bar Chart reusable API class that renders a simple and configurable bar chart.

(require("Bar"))(_selection, _data)

This function creates the graph using the selection as container
Parameters:
Name Type Description
_selection D3Selection A d3 selection that represents the container(s) where the chart(s) will be rendered
_data BarChartData The data to attach and generate the chart
Source:

Requires

  • module:d3-array,

Methods


module:Bar(_selection, _data)

This function creates the graph using the selection as container
Parameters:
Name Type Description
_selection D3Selection A d3 selection that represents the container(s) where the chart(s) will be rendered
_data BarChartData The data to attach and generate the chart
Source:

<static> betweenBarsPadding(_x)

Gets or Sets the padding of the chart (Default is 0.1)
Parameters:
Name Type Description
_x Number | module Padding value to get/set
Source:
Returns:
Current padding or Chart module to chain calls
Type
padding | module

<static> colorSchema(_x)

Gets or Sets the colorSchema of the chart
Parameters:
Name Type Description
_x Array.<String> Desired colorSchema for the graph
Source:
Returns:
Current colorSchema or Chart module to chain calls
Type
colorSchema | module

<static> enableLabels( [_x])

If true, adds labels at the end of the bars
Parameters:
Name Type Argument Default Description
_x Boolean <optional>
false
Source:
Returns:
Current value of enableLabels or Chart module to chain calls
Type
Boolean | module

<static> exportChart(filename, title)

Chart exported to png and a download action is fired
Parameters:
Name Type Description
filename String File title for the resulting picture
title String Title to add at the top of the exported picture
Source:

<static> hasPercentage(_x)

Gets or Sets the hasPercentage status
Parameters:
Name Type Description
_x boolean Should use percentage as value format
Source:
Returns:
Is percentage used or Chart module to chain calls
Type
boolean | module

<static> hasSingleBarHighlight(_x)

Gets or Sets the hasSingleBarHighlight status. If the value is true (default), only the hovered bar is considered to be highlighted and will be darkened by default. If the value is false, all the bars but the hovered bar are considered to be highlighted and will be darkened (by default). To customize the bar highlight or remove it completely, use highlightBarFunction instead.
Parameters:
Name Type Description
_x boolean Should highlight the hovered bar
Source:
Returns:
Is hasSingleBarHighlight used or Chart module to chain calls
Type
boolean | module

<static> height(_x)

Gets or Sets the height of the chart
Parameters:
Name Type Description
_x number Desired width for the graph
Source:
Returns:
Current height or Chart module to chain calls
Type
height | module

<static> highlightBarFunction(_x)

Gets or Sets the highlightBarFunction function. The callback passed to this function returns a bar selection from the bar chart. Use this function if you want to apply a custom behavior to the highlighted bar on hover. When hasSingleBarHighlight is true the highlighted bar will be the one that was hovered by the user. When hasSingleBarHighlight is false the highlighted bars are all the bars but the hovered one. The default highlight effect on a bar is darkening the highlighted bar(s) color.
Parameters:
Name Type Description
_x function Desired operation operation on a hovered bar passed through callback
Source:
Returns:
Is highlightBarFunction used or Chart module to chain calls
Type
highlightBarFunction | module
Example
barChart.highlightBarFunction(bar => bar.attr('fill', 'blue'))
barChart.highlightBarFunction(null) // will disable the default highlight effect

<static> isAnimated(_x)

Gets or Sets the isAnimated property of the chart, making it to animate when render. By default this is 'false'
Parameters:
Name Type Description
_x Boolean Desired animation flag
Source:
Returns:
Current isAnimated flag or Chart module
Type
isAnimated | module

<static> isHorizontal(_x)

Gets or Sets the horizontal direction of the chart
Parameters:
Name Type Description
_x number Desired horizontal direction for the graph
Source:
Returns:
If it is horizontal or Chart module to chain calls
Type
isHorizontal | module

<static> labelsMargin( [_x])

Offset between end of bar and start of the percentage bars
Parameters:
Name Type Argument Default Description
_x number <optional>
7 margin offset from end of bar
Source:
Returns:
Current offset or Chart module to chain calls
Type
number | module

<static> labelsNumberFormat( [_x])

Gets or Sets the labels number format
Parameters:
Name Type Argument Default Description
_x string <optional>
",f" desired label number format for the bar chart
Source:
Returns:
Current labelsNumberFormat or Chart module to chain calls
Type
string | module

<static> labelsSize( [_x])

Get or Sets the labels text size
Parameters:
Name Type Argument Default Description
_x number <optional>
12 label font size
Source:
Returns:
Current text size or Chart module to chain calls
Type
number | module

<static> loadingState(markup)

Gets or Sets the loading state of the chart
Parameters:
Name Type Description
markup string Desired markup to show when null data
Source:
Returns:
Current loading state markup or Chart module to chain calls
Type
loadingState | module

<static> margin(_x)

Gets or Sets the margin of the chart
Parameters:
Name Type Description
_x object Margin object to get/set
Source:
Returns:
Current margin or Chart module to chain calls
Type
margin | module

<static> nameLabel(_x)

Gets or Sets the nameLabel of the chart
Parameters:
Name Type Description
_x Number Desired nameLabel for the graph
Source:
Returns:
Current nameLabel or Chart module to chain calls
Type
nameLabel | module

<static> numberFormat(_x)

Gets or Sets the number format of the bar chart
Parameters:
Name Type Description
_x string Desired number format for the bar chart
Source:
Returns:
Current numberFormat or Chart module to chain calls
Type
numberFormat | module

<static> on()

Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customMouseOver, customMouseMove, customMouseOut, and customClick
Source:
Returns:
Bar Chart
Type
module

<static> orderingFunction(_x)

Changes the order of items given the custom function
Parameters:
Name Type Description
_x function A custom function that sets logic for ordering
Source:
Returns:
A custom ordering function or Chart module to chain calls
Type
function | Module

<static> percentageAxisToMaxRatio(_x)

Configurable extension of the x axis if your max point was 50% you might want to show x axis to 60%, pass 1.2
Parameters:
Name Type Description
_x number ratio to max data point to add to the x axis
Source:
Returns:
Current ratio or Chart module to chain calls
Type
ratio | module

<static> shouldReverseColorList(_x)

Gets or Sets whether the color list should be reversed or not
Parameters:
Name Type Description
_x boolean Should reverse the color list
Source:
Returns:
Is color list being reversed or Chart module to chain calls
Type
boolean | module

<static> valueLabel(_x)

Gets or Sets the valueLabel of the chart
Parameters:
Name Type Description
_x Number Desired valueLabel for the graph
Source:
Returns:
Current valueLabel or Chart module to chain calls
Type
valueLabel | module

<static> width(_x)

Gets or Sets the width of the chart
Parameters:
Name Type Description
_x number Desired width for the graph
Source:
Returns:
Current width or Chart module to chain calls
Type
width | module

<static> xTicks(_x)

Gets or Sets the number of ticks of the x axis on the chart (Default is 5)
Parameters:
Name Type Description
_x Number Desired horizontal ticks
Source:
Returns:
Current xTicks or Chart module to chain calls
Type
Number | module

<static> yAxisPaddingBetweenChart(_x)

Space between y axis and chart (Default 10)
Parameters:
Name Type Description
_x Number Space between y axis and chart
Source:
Returns:
Current value of yAxisPaddingBetweenChart or Chart module to chain calls
Type
Number | module

<static> yTicks(_x)

Gets or Sets the number of vertical ticks on the chart (Default is 6)
Parameters:
Name Type Description
_x Number Desired number of vertical ticks for the graph
Source:
Returns:
Current yTicks or Chart module to chain calls
Type
Number | module