Area Chart Component
Changed on:
2 July 2024
Overview
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.
v1.0.0
Charts UI
Alias
fc.chart.area
Detailed technical description
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
Properties
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. |
Configuration example
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
Version History
v1.0.0
Area Chart Component description
v24.4.29
The component is extended by adding the AreaConfig property that allows the configuration of tooltips and legend labels from the manifest.
Recommended Placement
None
