Line Chart Component
Changed on:
19 Apr 2024
Overview
A line chart visually represents data points over a continuous interval, typically along a horizontal axis. It offers a clear depiction of trends, patterns, or fluctuations in the data by connecting points with lines, aiding in easy comprehension of the data's trajectory over time or across categories. The x-axis commonly denotes time or categories, while the y-axis represents the numerical values being measured, providing a quick snapshot of data relationships.
| Plugin Name | Charts |
|---|
Chart component for use within a Fluent OMX web app.
v1.0.0
Charts UI
Alias
fc.chart.line
Detailed technical description
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: The data format expected to be used:
Description:
Data format accepted by the Line Chart Component
1{
2 "component": "fc.chart.line",
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": {
12 "formatter": "{{value}}"
13 },
14 "XAxis": {
15 "dataKey": "date",
16 "tick": false,
17 "label": "Date"
18 },
19 "YAxis": {
20 "label": "Value"
21 },
22 "lines": [{ "name": "Total Usage"}]
23 }
24}Language: json
Name: Example:
Description:
Example configuration of the Line Chart Component
Properties
Name | Type | Required | Default | Description |
chartContainer | ChartContainerConfig | No | width: '100%', aspect: 1, maxHeight: 200, debounce: 1 } | The property allows to make charts adapt to the size of parent container. One of the props width and height should be a percentage string. |
dataSource | string | Yes | none | A string that defines a path to GraphQL data. |
dataKey | string | Yes | none | The property signifies the specific field in every object of dataSource array that will be presented on the chart. |
tooltip | Tooltip | No | none | Tooltip configuration visibility. |
legend | boolean | No | none | Enables legend visibility. |
XAxis | Axis | Yes | none | X-axis which is corresponding to the data. |
YAxis | Axis | No | none | Y-axis which is corresponding to the data. |
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. Default is "full" and will take up the full width of the containing component. |
noCard | boolean | No | none | If set to true, allows to use component without card background. |
lines | LineConfig [] | No | none | An array of lines' configurations. |
ChartContainerConfig
Name | Type | Required | Default | Description |
width | string / number | No | 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 | number / string | No | none | The minimum width of the container. Example: "100px" / 100 |
minHeight | number / string | No | none | The minimum height of the container. Example: "100px" / 100 |
Axis
Name | Type | Required | Default | Description |
dataKey | string | No | none | The key of data displayed in the axis. |
tick | boolean | No | true | If set false, no ticks will be drawn. |
ticks | [string] / [number] | No | none | Set the values of axis ticks manually. |
interval | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart' | number | No | 'preserveEnd' | If set 0, all the ticks will be shown. If set ‘preserveStart’, ‘preserveEnd’ or "'preserveStartEnd', the ticks which is to be shown or hidden will be calculated automatically. |
tickLine | boolean | No | true | If set false, no axis tick lines will be drawn. |
axisline | boolean | No | true | If set 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. |
Tooltip
Name | Type | Required | Default | Description |
tooltipFormatter | string | No | none | Initial value to be displayed. |
tooltipLabelFormatter | string | No | none | Initial label to be displayed. |
LineConfig
Name | Type | Required | Default | Description |
name | string | No | none | Line name to be displayed in the tooltip or legend. |
Configuration example
1{
2 "component": "fc.chart.line",
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": {
12 "formatter": "{{value}}"
13 },
14 "XAxis": {
15 "dataKey": "value",
16 "tick": false,
17 "label": "i18n:fc.inventory.sources.dashboard.line.chart.time"
18 },
19 "YAxis": {
20 "label": "i18n:fc.inventory.sources.dashboard.line.chart.updates",
21 "tickFormatter": "{{compactNumberFormat value}}"
22 }
23 }
24}Language: json
Version History
v24.2.13
Line Chart description
Recommended Placement
None
