Docs
Changed on:
19 Apr 2024
A chart that represents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
| Plugin Name | Charts |
|---|
Chart component for use within a Fluent OMX web app.
Charts UI
fc.chart.bar
The Bar chart component can be included on any mystique page.
1[
2 { date:'2024-01-02', param1: 30, param2: 50, param3: 5 },
3 { date:'2024-01-03', param1: 60, param2: 30, param3: 10 },
4 { date:'2024-01-04', param1: 10, param2: 90, param3: 100 },
5 { date:'2024-01-05', param1: 57, param2: 50, param3: 40 },
6]Language: text
Name: Expected data format:
Description:
Data format accepted by the Bar Chart Component
1{
2 "component": "fc.chart.bar",
3 "props": {
4 "datasource": "path.to.GraphQL.data",
5 "YAxis": {
6 "label": "Value"
7 },
8 "XAxis": {
9 "dataKey": "date",
10 "label": "Date"
11 },
12 "bars": [
13 { "dataKey": "param1", "stackId": "a", "fill": "#8B45E4", "name": "customName1" },
14 { "dataKey": "param2", "stackId": "a", "fill": "#4568E4", "name": "customName2" },
15 { "dataKey": "param3", "stackId": "a", "fill": "#45B4E4", "name": "customName3" }
16 ],
17 "chartContainerConfig": {
18 "height": 500
19 },
20 "legend": true,
21 "tooltip": true
22 }
23}Language: json
Name: Example
Description:
Configuration example
Name | Type | Required | Default | Description |
XAxis | | yes | none | X-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
YAxis | | no | none | Y-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
bar | | yes | none | The key of data that is displayed in the chart. |
tooltip | | no | none | Display detailed information when hovering the bars. |
legend | | no | none | The content of the legend is generated by the name of Bar. Alternatively, if no name has been set, the dataKey will be used to generate legend content. |
chartContainerConfig | | no |  | The property allows to make charts to adapt to the size of the parent container. One of the props width and height should be a percentage string. |
title | | no | none | Chart card title. |
width | CardWidth ( | no | | Define the width of the card on a 12-column grid. Can use the named widths for readability or numbers directly. On mobile devices, all widths will automatically change to 12 for the best responsive experience. The default is "full" and will take up the full width of the containing component. |
noCard | | no | none | If set to |
Axis
Name | Type | Required | Default | Description |
dataKey | | no | none | The key of data that is displayed in the axis. |
tick | | no | | If set to |
tickLine | | no | | If set to |
axisline | | no | | If set to |
label | | no | none | The property refers to the label of the axis. |
offset | | no | for y-axis: | The offset to the specified "position". |
angle | | no | for y-axis: | The angle of axis labels. |
position | | no | The key of a group of data which should be unique in a bar chart.or x-axis: for y-axis: | The position of the label relative to the view box. |
tickFormatter | | no | none | Template string to customize data displayed on a tick. |
Bar
Name | Type | Required | Default | Description |
dataKey | | yes | none | The key of a group of data which should be unique in a bar. |
stackId | | no | none | The stack id of bar, when two bars have the same value axis and same stackId, then the two bars are stacked in order. |
fill | | no | none | Bar color in the HEX-format: |
name | | no | none | Bar name to be displayed in the tooltip or legend. |
ResponsiveContainerConfig
Name | Type | Required | Default | Description |
width | | no | | The percentage value of the chart's width or a fixed width. Example: |
aspect | | no | | Width/height. If specified, the height will be calculated by width/aspect. |
maxHeight | | no | | The maximum height of the container. |
height | | no | none | The percentage value of the chart's width or a fixed height. Example: |
minWidth | | no | none | The minimum width of the container. Example: |
minHeight | | no | none | The minimum height of the container. Example: |
1{
2 "component": "fc.chart.bar",
3 "props": {
4 "datasource": "path.to.GraphQL.data",
5 "YAxis": {
6 "label": "i18n:fc.inventory.sources.dashboard.bar.chart.updates",
7 "tickFormatter": "{{compactNumberFormat value}}"
8 },
9 "XAxis": {
10 "dataKey": "name",
11 "label": "i18n:fc.inventory.sources.dashboard.bar.chart.time",
12 "tick": false
13 },
14 "bars": [
15 { "dataKey": "ERP", "stackId": "a", "fill": "#8B45E4" },
16 { "dataKey": "RFID", "stackId": "a", "fill": "#4568E4" },
17 { "dataKey": "FluentOMS", "stackId": "a", "fill": "#45B4E4" }
18 ],
19 "chartContainerConfig": {
20 "height": 500
21 },
22 "legend": true,
23 "tooltip": true
24 }
25}Language: json
Bar Chart Component description
The component is extended by adding a property
`name`None
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
