Overview

Element

Basic Element

View Element

Video

Effect

Chart Element

Prop	Type	Required	Example	Value Range	Description
chartType	string	true	-	-	The type of chart to display. Supported types: bar, line, area, scatter, pie, doughnut, radar.
chartWidth	number	true	-	200 - 800	The width of the chart canvas, in pixels.
chartHeight	number	true	-	150 - 600	The height of the chart canvas, in pixels.
bgColor	string	false	-	-	The background color of the chart, in hex format.
bgAlpha	number	false	-	0 - 1	The transparency level of the chart background. 1 represents full opacity, and 0 represents full transparency.
showAxis	boolean	false	-	-	Whether to display the chart axes.
axisColor	string	false	-	-	The color of the chart axes, in hex format.
axisWidth	number	false	-	1 - 10	The width of the chart axes, in pixels.
showGrid	boolean	false	-	-	Whether to display the chart grid.
gridColor	string	false	-	-	The color of the chart grid, in hex format.
gridAlpha	number	false	-	0 - 1	The transparency level of the chart grid. 1 represents full opacity, and 0 represents full transparency.
showLabels	boolean	false	-	-	Whether to display chart labels.
labelStyle	object	false	-	-	Text style configuration for chart labels.
labelStyle.fill	string	false	-	-	The font color of chart labels, in hex format.
labelStyle.fontSize	number	false	-	8 - 100	The font size of chart labels, in pixels.
labelStyle.fontFamily	string	false	-	-	The font family of chart labels.
labelStyle.fontWeight	string	false	-	-	The font weight of chart labels (e.g., normal, bold).
labelStyle.stroke	string	false	-	-	The stroke color of chart labels, in hex format.
labelStyle.strokeThickness	number	false	-	0 - 10	The stroke width of chart labels, in pixels.
labelStyle.dropShadow	boolean	false	-	-	Whether to enable shadow effect for chart labels.
labelStyle.dropShadowColor	string	false	-	-	The shadow color of chart labels, in hex format.
labelStyle.dropShadowBlur	number	false	-	0 - 20	The blur radius of the label shadow.
labelStyle.dropShadowDistance	number	false	-	0 - 20	The distance of the label shadow from the text.
labelStyle.dropShadowAngle	number	false	-	0 - 6.28	The angle of the label shadow, in radians.
labelStyle.dropShadowAlpha	number	false	-	0 - 1	The opacity of the label shadow.
linePointStyle	string	false	-	-	The style of data points in line/area charts. Options: filled, hollow.
lineSmooth	boolean	false	-	-	Whether to smooth the lines in line/area charts.
lineAreaAlpha	number	false	-	0 - 1	The transparency level of the filled area in area charts.
showLegend	boolean	false	-	-	Whether to display the chart legend.
legendPosition	string	false	-	-	The position of the legend. Currently supports: bottom.
legendItemSize	number	false	-	10 - 30	The size of legend items, in pixels.
legendGap	number	false	-	4 - 20	The gap between legend items, in pixels.
showBarBackground	boolean	false	-	-	Whether to display the background of bar charts.
barBackgroundColor	string	false	-	-	The background color of bars, in hex format.
barBackgroundAlpha	number	false	-	0 - 1	The transparency level of the bar background.
barOrientation	string	false	-	-	The orientation of bars. Options: vertical, horizontal.
barCornerRadius	number	false	-	0 - 20	The corner radius of bars, in pixels.
dataSet	array	false	-	-	An array of data sets used to render the chart. Each data set contains a time point (dataTime) and data points (dataPoints).

Chart Types

The chartType property determines the visualization style:

bar: Vertical or horizontal bar chart
line: Line chart with optional smoothing
area: Area chart with filled regions
scatter: Scatter plot with data points
pie: Pie chart showing proportions
doughnut: Doughnut chart (pie chart with center hole)
radar: Radar/spider chart

Data Structure

The dataSet is an array of data objects, where each object contains:

dataTime: The time point relative to the ChartNode (in seconds)
dataPoints: An array of data points to be displayed at this time

Each data point in dataPoints contains:

id: Unique identifier for the data point
label: The label/name of the data point
value: The numeric value
color (optional): Custom color for this data point in hex format

Label Styling

The labelStyle object controls the appearance of chart labels:

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

Line and Area Chart Features

For line and area charts, you can configure:

linePointStyle: Display data points as filled circles or hollow circles
lineSmooth: Enable smooth curves instead of straight lines
lineAreaAlpha: Control the opacity of the filled area (area charts only)

Bar Chart Features

For bar charts, you can configure:

barOrientation: Display bars vertically or horizontally
barCornerRadius: Round the corners of bars
showBarBackground: Display a background behind bars
barBackgroundColor/barBackgroundAlpha: Style the bar background

Legend Configuration

Enable and customize the chart legend:

showLegend: Toggle legend visibility
legendPosition: Position of the legend (currently supports "bottom")
legendItemSize: Size of legend color indicators
legendGap: Spacing between legend items

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" }
      ]
    }
  ]
}