bar-chart
The component can display statistics related to data records (categorical variables). This can show a single or multiple data series for comparative purposes. This component is mostly used in jig.default or jig.list.
Some properties are common to all components, see Common component properties for a list and their configuration options.
Core structure | |
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 |
series | data - values to be used in the chart color - defines the color of the bar used in the chart |
Other options | |
chart | title and subtitle - Name and a short description of your chart height and width - The parameters of the graph displayed (in pixels) |
yAxis | labels - Selection of different formats such as currency, numberStyle, compactDisplay and notation. tickAmount - The number of ticks that should be displayed on the y-axis. |
xAxis | labels - Selection of different formats such as dateFormat, currency, unit, and signDisplay. tickAmount - The number of ticks to display on the x-axis. min and max - Minimum and maximum values that should be displayed on the x-axis. 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. 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 is shown. isLastTickHidden: value is either true/false. minPadding - create padding on the x and y axis for example, 0.02 (x-axis) and 0.05 (y-axis) |
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 |
legend | isHidden - The setting of a boolean value if the legend (naming of the series) should be displayed under the chart. |
Bar-chart finance static
The widget displays 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
