API: Grouped-bar

Grouped Bar Chart reusable API module that allows us rendering a multi grouped bar and configurable chart.

(require("Grouped-bar"))(_selection, _data)

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

Requires

  • module:d3-array,

Methods


module:Grouped-bar(_selection, _data)

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

<static> aspectRatio( [_x])

Gets or Sets the aspect ratio of the chart
Parameters:
Name Type Argument Default Description
_x Number <optional>
null Desired aspect ratio for the graph
Source:
Returns:
Current aspect ratio or Area Chart module to chain calls
Type
Number | Module

<static> betweenBarsPadding( [_x])

Gets or Sets the padding between bars. The default value is 0.1
Parameters:
Name Type Argument Default Description
_x Number <optional>
0.1 Padding value to get/set
Source:
Returns:
Current padding or Chart module to chain calls
Type
Number | module

<static> betweenGroupsPadding( [_x])

Gets or Sets the padding between groups of bars. The default value is 0.1
Parameters:
Name Type Argument Default Description
_x Number <optional>
0.1 Padding value to get/set
Source:
Returns:
Current group padding or Chart module to chain calls
Type
Number | 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> 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> grid( [_x])

Gets or Sets the grid mode.
Parameters:
Name Type Argument Default Description
_x String <optional>
null Desired mode for the grid ('vertical'|'horizontal'|'full')
Source:
Returns:
Current mode of the grid or Area Chart module to chain calls
Type
String | module

<static> groupLabel(_x)

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

<static> height( [_x])

Gets or Sets the height of the chart
Parameters:
Name Type Argument Default Description
_x Number <optional>
500 Desired width for the graph
Source:
Returns:
Current height or Area Chart module to chain calls
Type
height | module

<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 Argument Default Description
_x Boolean <optional>
false 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 Argument Default Description
_x number <optional>
false Desired horizontal direction for the graph
Source:
Returns:
If it is horizontal or Bar Chart module to chain calls
Type
isHorizontal | 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> locale( [_x])

Gets or Sets the locale which our formatting functions use. Check the d3-format docs for the required values.
Parameters:
Name Type Argument Default Description
_x LocaleObject <optional>
null _x Desired locale object format.
Source:
Returns:
Current locale object or Chart module to chain calls
Type
LocaleObject | 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 Area 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> 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> tooltipThreshold( [_x])

Gets or Sets the minimum width of the graph in order to show the tooltip NOTE: This could also depend on the aspect ratio
Parameters:
Name Type Argument Default Description
_x Number <optional>
480 Minimum width of chart to show the tooltip
Source:
Returns:
Current tooltipThreshold or Area Chart module to chain calls
Type
Number | 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
Number | module

<static> valueLabelFormat( [_x])

Gets or Sets the valueLabelFormat of the chart
Parameters:
Name Type Argument Default Description
_x Array.<String> <optional>
',f' Desired valueLabelFormat for the graph
Source:
Returns:
Current valueLabelFormat or Chart module to chain calls
Type
Array.<String> | module

<static> width( [_x])

Gets or Sets the width of the chart
Parameters:
Name Type Argument Default Description
_x Number <optional>
960 Desired width for the graph
Source:
Returns:
Current width or Area Chart module to chain calls
Type
Number | module

<static> xTicks( [_x])

Gets or Sets the number of ticks of the x axis on the chart
Parameters:
Name Type Argument Default Description
_x Number <optional>
5 Desired xTicks
Source:
Returns:
Current xTicks or Chart module to chain calls
Type
Number | module

<static> yAxisLabel(_x)

Gets or Sets the y-axis label of the chart
Parameters:
Name Type Description
_x String Desired label string
Source:
Returns:
Current yAxisLabel or Chart module to chain calls
Type
String | module
Example
groupedBar.yAxisLabel('Ticket Sales')

<static> yAxisLabelOffset( [_x])

Gets or Sets the offset of the yAxisLabel of the chart. The method accepts both positive and negative values. The default value is -60
Parameters:
Name Type Argument Default Description
_x Number <optional>
-60 Desired offset for the label
Source:
Returns:
Current yAxisLabelOffset or Chart module to chain calls
Type
Number | module
Example
groupedBar.yAxisLabelOffset(-55)

<static> yTicks( [_x])

Gets or Sets the number of ticks of the y axis on the chart
Parameters:
Name Type Argument Default Description
_x Number <optional>
5 Desired vertical ticks
Source:
Returns:
Current yTicks or Chart module to chain calls
Type
Number | module

<static> yTickTextOffset( [_x])

Gets or Sets the x and y offset of ticks of the y axis on the chart
Parameters:
Name Type Argument Default Description
_x Object <optional>
{ y: -8, x: -20 } Desired offset
Source:
Returns:
Current offset or Chart module to chain calls
Type
Object | module