Area Chart Component
UI 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 |
|---|
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]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}Properties
| Name | Type | Required | Default | Description |
| chartContainerConfig | `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 | `string` | yes | none | The property signifies the specific field in every object of the dataSource array that will be presented on the chart. |
| tooltip | `boolean` | no | none | Enables tooltip visibility. |
| legend | `boolean` | no | none | Enables legend visibility. |
| XAxis | ` Axis` | yes | none | X-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
| YAxis | ` Axis` | no | none | Y-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
| title | `string` | no | none | Chart card title. |
| width | CardWidth (`"quarter"` / `"third"` / `"half"` / `"two-thirds"` / `"full"`/ `number` (1-12)) | no | `"full"` | 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 | `boolean` | no | none | If set to `true`, it allows using component without a card background. |
| areas | AreaConfig [] | No | none | An array of areas' configurations. |
| Name | Type | Required | Default | Description |
| dataKey | `string` | no | none | The key of data that is displayed in the axis. |
| tick | `boolean` | no | `true` | If set to `false`, no ticks will be drawn. |
| tickLine | `boolean` | no | `true` | If set to `false`, no axis tick lines will be drawn. |
| axisline | `boolean` | no | `true` | If set to `false`, no axis line will be drawn. |
| label | `string` | no | none | The property refers to the label of the axis. |
| tickFormatter | `string` | no | none | Template string to customize data displayed on a tick. |
| Name | Type | Required | Default | Description |
| width | `string/number` | no | `"100%" / 100` | The percentage value of the chart's width or a fixed width. |
| aspect | `number` | no | `1` | Width/height. If specified, the height will be calculated by width/aspect. |
| maxHeight | `number` | no | `200` | The maximum height of the container. |
| height | `string/number` | no | none | The percentage value of the chart's width or a fixed height.Example:`"100px" / 100` |
| minWidth | `string/number` | no | none | The minimum width of the container.Example:`"100px" / 100` |
| minHeight | `string/number` | no | none | The minimum height of the container.Example:`"100px" / 100` |
| 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}Version History
See previous versions
2024-04-29
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
