Fluent Commerce Logo
Docs
Sign In

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.

No alt text provided
Plugin NameCharts

Chart component for use within a Fluent OMX web app.

2023-12-15

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

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

Axis

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.

ChartContainerConfig

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`

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

2023-12-27

v1.0.0

Area Chart Component description

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

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.

Fluent Logo