Line Chart Component

UI 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.

2023-12-15

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

none

Initial value to be displayed.
Example:

`'{{value}}'`

tooltipLabelFormatter

string

none

Initial label to be displayed.
Example:

`'{{label}}'`

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

2024-02-13

v24.2.13

Line Chart description

Recommended Placement

None