System StatusSamples on GitHub

bar-chart

The component can display statistics related to data records (categorical variables) represented in a bar chart. This can show a single or multiple data series for comparative purposes and highlight specific regions or ranges on the chart to make it easier for users to interpret and analyze the data. This component is mostly used in jig.default or jig.list

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure

series

color - defines the color of the bar used in the chart.

data

values to be used in the chart.

yAxis

min and max values that display on the y-axis. The max property doesn't have to be defined, in this case, it will automatically be calculated depending on your data.

xAxis

categories to display on the x-axis

Other options

chart

  • titleand subtitle - Name and a short description of your chart.

  • height and width - The parameters of the graph displayed (in pixels).

legend

isHidden - The setting of a boolean value if the legend (naming of the series) should be displayed under the chart.

plotBands

The from and to properties define the area to be filled with color. Specify the range using the from and to properties with numeric values. color Sets the color of the band for the y-axis, choose a color from the provided color palette. Use plotbands to highlight specific regions or ranges on the chart, making it easier for users to interpret and analyze the data.

plotOptions

series - Different properties available to manipulate the data shown in the bar such as width of columns, the interval between two points, option to hide markers.

series

name - The naming of the actual series.

xAxis

  • isFirstLabelHidden value is either true to hide the first label or false to display the first label. The property doesn't have to be defined, by default the first label is shown.

  • isFirstTickHidden value is either true/false. Set to true hides the whole axis.

  • isHidden value is either true/false.

  • isLastLabelHidden value is either true to hide the last label or false to display the last label. The property doesn't have to be defined, by default the last label are shown.

  • isLastTickHidden value is either true to hide the last line and label or false to display the last line and label. The property doesn't have to be defined, by default the last label and line are shown.

  • labels - Label of axis, a selection of different formats such as dateFormat, currency, unit, and signDisplay are available.

  • min and max - Minimum and maximum values that should be displayed on the x-axis.

  • minPadding - When no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly. The default is set to 0.02 (x-axis) and 0.05 (y-axis).

  • tickAmount - The number of ticks to display on the x-axis. The final amount doesn't have to be exactly the same number as you pass into it. Round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100. Set ticks to 3 will be honored and shows 0, 50, and 100.

yAxis

  • isFirstLabelHidden value is either true/false. Set to true hides the first label. The property doesn't have to be defined, by default the first label is shown.

  • isFirstTickHidden value is either true/false. Set to true hides the whole axis.

  • isHidden value is either true/false. Set to true the last label is hidden.

  • isLastLabelHidden value is either true to hide the last label and line or false to display the last label and line. The property doesn't have to be defined, by default the last label and line are shown.

  • isLastTickHidden value is either true to hide the last line and label or false to display the last line and label. The property doesn't have to be defined, by default the last label and line are shown.

  • labels - Label of axis, a selection of different formats such as currency, numberStyle, compactDisplay and notation is available.

  • minPadding - When no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly. The default is set to 0.02 (x-axis) and 0.05 (y-axis).

  • min and max - Minimum and maximum values that should be displayed on the y-axis.

  • tickAmount - The number of ticks to display on the x-axis. The final amount doesn't have to be exactly the same number as you pass into it. Round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100. Set ticks to 3 will be honored and shows 0, 50, and 100

Examples and code snippets

Bar-chart finance static

Finance bar-chart
Finance bar-chart

The jig displays a bar chart with an annual overview of finances. The x-axis shows the months and the y-axis the monetary amount. Using number formatting, we can have any currency displayed.

Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for dynamic data in GitHub.

Bar-chart multiple series

Chart with multiple series
Chart with multiple series

The jig displays a bar chart with four series that compares amounts for three years per quarter. In this example the Legend is shown.

Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources in order series1 and series2: See the full datasource code sample for dynamic data series 1 and series 2 in GitHub.

Bar-chart with plot bands

The jig displays a bar chart with an annual overview of finances. The x-axis shows the months and the y-axis the monetary amount. The data points are easy to see as we used the plotBands property to add color. In this example multiple bands are defined by adding the form, to and color properties.

Examples: See the full code sample in GitHub.

Bar-chart with plot bands
Bar-chart with plot bands

Bar-chart using expressions

Chart using expressions
Chart using expressions

In this example expressions are used to dertermine the series, categories, min, max, and tickAmount of a bar chart . The x-axis shows the quarters and the y-axis the monetary amount using the format property to display the currency.

Examples: See the full code sample in GitHub.

Datasources See the full datasource code sample for series 1 and series 2 in GitHub.

PreviouschartsNextline-chart

Last updated

Was this helpful?