Docs
Changed on:
19 Apr 2024
A chart that displays graphically quantitative data. It is based on the line chart. The area between the axis and line is emphasized with colors. Commonly two or more quantities are compared with an area chart.
| Plugin Name | Charts |
|---|
Chart component for use within a Fluent OMX web app.
Charts UI
fc.chart.area
The Area chart component can be included on any mystique page.
1[
2 { date: '2024-01-02', value: 100 },
3 { date: '2024-01-03', value: 30 },
4 { date: '2024-01-04', value: 90 },
5 { date: '2024-01-05', value: 50 },
6]Language: plain_text
Name: Expected data format:
Description:
Data format accepted by the Area Chart Component
1{
2 "component": "fc.chart.area",
3 "props": {
4 "datasource": "path.to.GraphQL.data",
5 "chartContainerConfig": {
6 "height": 170,
7 "maxHeight": 170
8 },
9 "dataKey": "value",
10 "legend": true,
11 "tooltip": true,
12 "XAxis": {
13 "dataKey": "date",
14 "label": "Date"
15 },
16 "YAxis": {
17 "label": "Value"
18 },
19 "areas": [{ "name": "Total Usage"}]
20 }
21}Language: json
Name: Example
Description:
Configuration example
Name | Type | Required | Default | Description |
chartContainerConfig | | no | width: '100%', aspect: 1, maxHeight: 200, debounce: 1 } | 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. |
dataKey | | yes | none | The property signifies the specific field in every object of the dataSource array that will be presented on the chart. |
tooltip | | no | none | Enables tooltip visibility. |
legend | | no | none | Enables legend visibility. |
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. |
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 |
areas | AreaConfig [] | No | none | An array of areas' configurations. |
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. |
tickFormatter | | no | none | Template string to customize data displayed on a tick. |
ChartContainerConfig
Name | Type | Required | Default | Description |
width | | no | | The percentage value of the chart's width or a fixed width. |
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: |
AreaConfig
Name | Type | Required | Default | Description |
name | string | no | none | Area name to be displayed in the tooltip or legend. |
1{
2 "component": "fc.chart.area",
3 "props": {
4 "datasource": "path.to.GraphQL.data",
5 "chartContainerConfig": {
6 "height": 170,
7 "maxHeight": 170
8 },
9 "dataKey": "value",
10 "legend": true,
11 "tooltip": true,
12 "XAxis": {
13 "dataKey": "value",
14 "tick": false,
15 "label": "i18n:fc.inventory.sources.dashboard.bar.chart.time"
16 },
17 "YAxis": {
18 "label": "i18n:fc.inventory.sources.dashboard.bar.chart.updates",
19 "tickFormatter": "{{compactNumberFormat value}}"
20 }
21 }
22}Language: json
Area Chart Component description
The component is extended by adding the AreaConfig property that allows the configuration of tooltips and legend labels from the manifest.
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.
