Chart Element

Proprietas	Typus	Requiritur	Exemplum	Ambitus Valoris	Descriptio
chartType	string	true	-	-	Typus chartis ad exhibendum. Typa sustenta: bar, line, area, scatter, pie, doughnut, radar.
chartWidth	number	true	-	200 - 800	Latitudo chart canvas, in pixelibus.
chartHeight	number	true	-	150 - 600	Altitudo chart canvas, in pixelibus.
bgColor	string	false	-	-	Color background chart, in forma hex.
bgAlpha	number	false	-	0 - 1	Gradus transparentiae background chart. 1 plenam opacitatem repraesentat, et 0 plenam transparentiam.
showAxis	boolean	false	-	-	Num chart axes exhibeantur.
axisColor	string	false	-	-	Color chart axes, in forma hex.
axisWidth	number	false	-	1 - 10	Latitudo chart axes, in pixelibus.
showGrid	boolean	false	-	-	Num chart grid exhibeatur.
gridColor	string	false	-	-	Color chart grid, in forma hex.
gridAlpha	number	false	-	0 - 1	Gradus transparentiae chart grid. 1 plenam opacitatem repraesentat, et 0 plenam transparentiam.
showLabels	boolean	false	-	-	Num chart labels exhibeantur.
labelStyle	object	false	-	-	Configuratio stili textus pro chart labels.
labelStyle.fill	string	false	-	-	Color fontis chart labels, in forma hex.
labelStyle.fontSize	number	false	-	8 - 100	Magnitudo fontis chart labels, in pixelibus.
labelStyle.fontFamily	string	false	-	-	Familia fontis chart labels.
labelStyle.fontWeight	string	false	-	-	Pondus fontis chart labels (exempli gratia, normal, bold).
labelStyle.stroke	string	false	-	-	Color stroke chart labels, in forma hex.
labelStyle.strokeThickness	number	false	-	0 - 10	Latitudo stroke chart labels, in pixelibus.
labelStyle.dropShadow	boolean	false	-	-	Num effectum umbrae pro chart labels permittatur.
labelStyle.dropShadowColor	string	false	-	-	Color umbrae chart labels, in forma hex.
labelStyle.dropShadowBlur	number	false	-	0 - 20	Radius blur umbrae label.
labelStyle.dropShadowDistance	number	false	-	0 - 20	Distantia umbrae label ab textu.
labelStyle.dropShadowAngle	number	false	-	0 - 6.28	Angulus umbrae label, in radianis.
labelStyle.dropShadowAlpha	number	false	-	0 - 1	Opacitas umbrae label.
linePointStyle	string	false	-	-	Stylus punctorum data in chartibus linea/area. Optiones: implentus, vacuus.
lineSmooth	boolean	false	-	-	Num lineas in chartibus linea/area leniri.
lineAreaAlpha	number	false	-	0 - 1	Gradus transparentiae areae impletae in chartibus areae.
showLegend	boolean	false	-	-	Num chart legend exhibeatur.
legendPosition	string	false	-	-	Positio legend. Nunc sustinet: bottom.
legendItemSize	number	false	-	10 - 30	Magnitudo elementorum legend, in pixelibus.
legendGap	number	false	-	4 - 20	Intervallum inter elementa legend, in pixelibus.
showBarBackground	boolean	false	-	-	Num background chartibus bar exhibeatur.
barBackgroundColor	string	false	-	-	Color background bararum, in forma hex.
barBackgroundAlpha	number	false	-	0 - 1	Gradus transparentiae background bararum.
barOrientation	string	false	-	-	Orientatio bararum. Optiones: verticalis, horizontalis.
barCornerRadius	number	false	-	0 - 20	Radius corner bararum, in pixelibus.
dataSet	array	false	-	-	Array data setorum ad chartum renderandum. Unusquisque data set continet punctum temporis (dataTime) et puncta data (dataPoints).

Chart Types

Proprietas chartType stilum visualizationis determinat:

bar: Chart bar verticalis aut horizontalis
line: Chart linea cum optionali lenimento
area: Chart area cum regionibus implentibus
scatter: Plot dispersus cum punctis data
pie: Chart pie ostendens proportiones
doughnut: Chart doughnut (chart pie cum foraminis centro)
radar: Chart radar/spider

Data Structure

dataSet est array obiectorum data, ubi singula obiecta continent:

dataTime: Punctum temporis respectu ChartNode (in secundis)
dataPoints: Array punctorum data quae hoc tempore exhibenda sunt

Unumquodque punctum data in dataPoints continet:

id: Identificator unicus pro puncto data
label: Label/nomen puncti data
value: Valor numericus
color (optionale): Color consuetudinaria pro hoc puncto data in forma hex

Label Styling

Obiectum labelStyle aspectum chart labelorum moderatur:

Proprietates Font: fill, fontSize, fontFamily, fontWeight
Proprietates Stroke: stroke, strokeThickness
Proprietates Shadow: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Line and Area Chart Features

Pro chartibus lineari et area, potes configurare:

linePointStyle: Exhibere puncta data ut circulos implentos aut circulos vacuos
lineSmooth: Permittere curvaturas lenes pro lineis rectis
lineAreaAlpha: Moderare opacitatem areae impletae (chartibus areae tantum)

Bar Chart Features

Pro chartibus bar, potes configurare:

barOrientation: Exhibere barras verticaliter aut horizontaliter
barCornerRadius: Round corners bararum
showBarBackground: Exhibere background post barras
barBackgroundColor/barBackgroundAlpha: Stylum background bararum

Legend Configuration

Permitte et customize chart legend:

showLegend: Toggle visibilitatem legend
legendPosition: Positio legend (nunc sustinet "bottom")
legendItemSize: Magnitudo indicum colorum legend
legendGap: Spatium inter elementa legend

chartElement.json

{
"id": "chart-element-id",
"type": "Chart",
"start": 0,
"duration": 10,
"trackIndex": 0,
"x": 100,
"y": 100,
"chartType": "bar",
"chartWidth": 800,
"chartHeight": 600,
"bgColor": "#ffffff",
"bgAlpha": 1,
"showAxis": true,
"axisColor": "#000000",
"axisWidth": 2,
"showGrid": true,
"gridColor": "#cccccc",
"gridAlpha": 0.5,
"showLabels": true,
"labelStyle": {
  "fill": "#333333",
  "fontSize": 12,
  "fontFamily": "Arial",
  "fontWeight": "normal",
  "stroke": "#000000",
  "strokeThickness": 0,
  "dropShadow": false,
  "dropShadowColor": "#000000",
  "dropShadowBlur": 4,
  "dropShadowDistance": 3,
  "dropShadowAngle": 1.2,
  "dropShadowAlpha": 1
},
"showLegend": true,
"legendPosition": "bottom",
"legendItemSize": 14,
"legendGap": 8,
"barOrientation": "vertical",
"barCornerRadius": 4,
"showBarBackground": false,
"barBackgroundColor": "#eeeeee",
"barBackgroundAlpha": 0.4,
"dataSet": [
  {
    "dataTime": 0,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 10, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 20, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 15, "color": "#ffce56" }
    ]
  },
  {
    "dataTime": 5,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 25, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 18, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 22, "color": "#ffce56" }
    ]
  }
]
}

Overview

Element

Effect