JSignage:Graph:Bar and column charts

This page is related to jSignage Graph API.

Introduction

Bar and column charts are part of the jSignage Graph API and represent data as horizontal bars / vertical columns where the size of each bar / column is determined by the data associated to it. The bars / columns can be grouped and / or stacked.

The major axis ( horizontal for column charts, vertical for bar charts ) is a discrete axis representing categories.
The minor axis ( vertical for column charts, horizontal for bar charts ) is a continuous axis representing values.
In case of negative values, when allowed, the bars / columns are drawn on the opposite side of the baseline.
The fill color of each bar in a group or stack is adjusted separately. The fill is either a solid uniform color or a linear luminosity gradient along the major axis.
The text inside a bar is configurable among the following options: no text, label, category, value or percentage. Likewise the text outside and next to a bar is configurable with the same options. For stacked bars, the value option displays the sum of all values in the stack.
If labels are provided then a legend box can be included in the layer next to the graph area. In a basic bar or column chart there is only one label since there is only one bar per category, but a legend box may still be included.

Classification

Type	Bar charts	Column charts
Basic	`$.Graph.barChart()`	`$.Graph.columnChart()`
Grouped	`$.Graph.groupedBarChart()`	`$.Graph.groupedColumnChart()`
Stacked	`$.Graph.stackedBarChart()`	`$.Graph.stackedColumnChart()`
Stacked & grouped	`$.Graph.stackedAndGroupedBarChart()`	`$.Graph.stackedAndGroupedColumnChart()`
Percentage	`$.Graph.percentageBarChart()`	`$.Graph.percentageColumnChart()`

Gallery of bar and column charts

Parameters

The bar and column charts functions are taking one parameter (type: Plain Object) which can contain both specific attributes (detailed under each function) and any of the common attributes detailed below.

See also Graph styling attributes page.

Common attributes

axisStrokeStyle
Type: Plain Object.

Stroke styling object which serves as a default for drawing both the horizontal and vertical axis.
baselineStrokeStyle
Type: Plain Object.

Stroke styling object which serves as a default for drawing the baseline of both the horizontal and vertical axis.
barGradient
Type: Number. Default: 1 (no gradient).

Adds a bar level linear luminosity gradient inside each bar, in the direction of the major axis.

If positive, the luminosity at the start side is 100% and the luminosity at the end side is multiplied by barGradient.

If negative, the luminosity at the start side is multiplied by barGradient and the luminosity at the ebd side is 100%.
borderSize
Type: Number. Default: ~1 pixel.

Horizontal or vertical gap between adjacent bars in a group or a stack.
chartArea
Type: Plain Object. Default: null.

Object with top, left, width and height attributes to define the position of the chart proper within the layer. By default the chart will occupy as much space as possible without overlapping the legend box.
chartGradient
Type: Number. Default: 1 (no gradient).

Adds a chart level luminosity gradient among bars along the major axis.

If positive, the luminosity of the first bar is 100% and the luminosity of the last bar is multiplied by chartGradient.

If negative, the luminosity of the first bar is multiplied by chartGradient and the luminosity of the last bar is 100%.
fontFamily, fontSize, fontStyle, fontVariant, fontWeight
Type: String or Number.

Default text styling attributes for bar text, axis text and legend. The fontSize is set by default to 4% of layer size.
gridlinesStrokeStyle
Type: Plain Object.

Stroke styling object which serves as a default for gridlines along both the horizontal and vertical axis.
legend
Type: Plain Object. Default: The legend is displayed on the bottom side for bar charts and right side for column charts.

Either a legend box styling object or null to disable the legend box. Note that the legend box will reduce the graph area when enabled.
strokeStyle
Type: Plain Object.

Default stroke style for bars and legend, excluding the legend's frame.
textInside
Type: String. Default: 'none'.
Selector for the text displayed inside a bar. It can be one of the following:
- 'none': no text
- 'value': the bar's value
- 'label': the bar's label
- 'category': the category name associated to its position along the major axis
- 'percentage' the bar's value in percents
textInsideStyle
Type: Plain Object.

A text styling object to customize the text inside bars.
textOutside
Type: String. Default: 'none'.
Selector for the text displayed inside a bar. It can be one of the following:
- 'none': no text
- 'value': the bar's value
- 'label': the bar's label
- 'category': the category name associated to its position along the major axis
- 'percentage' the bar's value in percents
textOutsideStyle
Type: Plain Object.

A text styling object to customize the text outside bars.
xAxis
Type: Plain Object.

Configuration of the horizontal axis. This is either a discrete axis parameter object for column charts or a continuous axis object for bar charts.
yAxis
Type: Plain Object.

Configuration of the vertical axis. This is either a continuous axis parameter object for column charts or a discrete axis object for bar charts.