Conigma Connect

Chart

Discriminator: chart
Blazor Component: ApexChart (Blazor-ApexCharts)

Description

The Chart component draws one or more data series on a shared pair of axes, in the style of the charts on the dashboard. Every series reads its X and Y values with JSON Paths from a list of JSON items. By default the series overlap; with stacking they are stacked on top of each other. The chart is display only: it provides no data to buttons and has no validation.

Properties

Property

Type

Required

Default

Description

component

string

✅ Yes

"chart"

Type discriminator

style

string

No

null

Inline CSS style of the wrapper, which spans the full width by default

id

string

No

null

Component identifier

series

ChartSeries[]

No

[]

Data series drawn in the chart

items

JsonObject[]

No

[]

Items the series read their values from, unless a series has its own items

title

string

No

null

Title displayed above the chart

height

integer

No

300

Height in pixels

xAxisType

ChartXAxisType

No

"Category"

Type of the X values

stacking

ChartStacking

No

"None"

How the series are stacked

showToolbar

boolean

No

false

Shows the download and zoom controls. Zooming is only enabled together with the toolbar, which provides the control to reset it

Series

Every series has a type discriminator, written as its first property. Only point series (one Y value per X value) exist so far.

Property

Type

Required

Default

Description

type

string

✅ Yes

"point"

Series discriminator

name

string

✅ Yes

—

Name shown in the legend and tooltip

xValuePath

JSON Path

✅ Yes

—

Selects the X value from each item. Items without a resolvable X value are skipped

yValuePath

JSON Path

✅ Yes

—

Selects the Y value from each item: a number or a numeric string. Other values leave a gap

seriesType

PointSeriesType

No

"Area"

Area, Bar, Line or Scatter

color

string

No

null

CSS hex color, e.g. #28a745. When omitted, the chart palette is used

items

JsonObject[]

No

null

Items of this series only. When omitted, the items of the chart are used

stroke

ChartStroke

No

{}

Line settings of the series, see below

Stroke

Property

Type

Required

Default

Description

curve

StrokeCurve

No

"Smooth"

How the points are connected: Smooth, MonotoneCubic (smooth, but never above or below the neighboring points), Straight or Stepline

width

integer

No

null

Line width in pixels. When omitted: 4 for Area, 5 for Line, 2 for Scatter and 0 for Bar, where it is the width of the outline

dashLength

integer

No

0

Length in pixels of the dashes and of the gaps between them. 0 draws a solid line

The settings are applied to every series, also when they are omitted, so lines are smooth whatever the series types of the chart are.

X-Axis Types

Value

X values

Order of the points

Category

Labels: strings as they are, other values as their JSON text

Item order

Datetime

ISO 8601 strings (taken as UTC when they have no offset) or numbers holding the Unix time in milliseconds

By time

Numeric

Numbers or numeric strings

By value

On a Category axis, all series should use the same X values in the same order, as the labels are taken from the order of the points.

Stacking

Value

Behavior

None

The series overlap, each starting at zero

Normal

Each series starts where the previous series ends

Percent100

The series are stacked and scaled so that each X value adds up to 100 percent

Stacking requires all series to share the same seriesType.

Example: Stacked Areas with Shared Items

Rendering...

Example: Lines with Items per Series and a Dashed Line

Rendering...

Theming

The chart follows the light or dark mode of the application, like the dashboard charts.