Chart Component

Charts are a powerful and flexible way to visualize your data, letting Dynaboard do the heavy lifting.

Create a chart node and specify its data source (opens in a new tab). Your data can come from any other node, most commonly the output of a function node (e.g. {{function1.data}}). From there, the chart node has a handful of options to customize its look and feel.

Charts in Dynaboard are built on top of the incredible Plotly (opens in a new tab) charting library, used by many top data teams.

Supported Charts

Line charts (LINE)
Bar charts (BAR)
Scatter plots (SCATTER)

Properties

Visible

Prop	`isVisible`
Type	`boolean`
Default	`true`

Whether or not this node is visible.

Enabled

Prop	`isEnabled`
Type	`boolean`
Default	`true`

Whether or not this node is enabled.

Tooltip

Prop	`tooltip`
Type	`string`
Default	`undefined`

The tooltip text to display when hovered or focused over this node.

Top

Prop	`top`
Type	`number`
Default	`1`

The position of the node from the top side of the grid (grid-row-start).

Left

Prop	`left`
Type	`number`
Default	`1`

The position of the node from the left side of the grid (grid-column-start).

Width

Prop	`width`
Type	`string`
Default	`650px`

The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Width

Prop	`minWidth`
Type	`string`
Default	`undefined`

The minimum width of the node. When this node is in a grid layout, this property is ignored.

Max Width

Prop	`maxWidth`
Type	`string`
Default	`undefined`

The maximum width of the node. When this node is in a grid layout, this property is ignored.

Height

Prop	`height`
Type	`string`
Default	`450px`

The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Height

Prop	`minHeight`
Type	`string`
Default	`undefined`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Max Height

Prop	`maxHeight`
Type	`string`
Default	`undefined`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Overflow

Prop	`overflow`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.

Overflow X

Prop	`overflowX`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal axis for content that is larger than its container.

Overflow Y

Prop	`overflowY`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the vertical axis for content that is larger than its container.

Custom Styles

Prop	`styles`
Type	`string`
Default	`::component { }`

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Object Fit

Prop	`objectFit`
Type	`ObjectFit ('none' \| 'contain' \| 'cover' \| 'fill' \| 'scale-down')`
Default	`cover`

The strategy used to set how the content of a replaced element should be resized to fit its container.

Chart Title

Prop	`title`
Type	`string`
Default	`User Growth`

The title of the chart to be displayed on top of the chart.

Legend

Prop	`allowLegend`
Type	`boolean`
Default	`false`

Whether or not to allow legend in the chart.

Legend Orientation

Prop	`legendOrientation`
Type	`LegendOrientations ('v' \| 'h')`
Default	`v`

The orientation of the legend in the chart.

Legend Position

Prop	`legendPosition`
Type	`LegendPositions ('top' \| 'bottom' \| 'left' \| 'right')`
Default	`top`

The position of the legend in the chart.

Interactive

Prop	`isInteractive`
Type	`boolean`
Default	`true`

Whether or not to be interactive with the chart.

Data Source

Prop	`dataSource`
Type	`unknown`
Default	`[ { x: 0, y1: 2, y2: 1 }, { x: 1, y1: 4, y2: 2 }, { x: 2, y1: 6, y2: 3 }, { x: 3, y1: 10, y2: 5 }, ]`

The data source to use for the chart. Data sources should be an array of objects with a consistent set of keys. For example can represent a cartesian X/Y coordinate by having an array of objects with keys x and y.

Parent Chart Type

Prop	`parentChartType`
Type	`ParentChartTypes ('cartesian' \| 'pie' \| 'custom')`
Default	`cartesian`

The type of chart to be configured.

Bar Mode

Prop	`barMode`
Type	`BarModes ('group' \| 'stack')`
Default	`group`

The mode of the bar chart.

Dimensions

Prop	`dimensions`
Type	`array`
Default	`[ { 'key': 'Untitled Dimension 1', 'id': '00000000-0000-0000-0000-000000000000', 'name': 'Untitled Dimension 1', 'side': 'left', 'yKey': 'y1', 'type': 'line', 'mode': 'lines+markers', 'lineShape': 'spline', 'markerColor': 'purple.500' } ]`

The dimension configuration for the chart.

Dimension

Prop	`dimensions[]`
Type	`object`
Default	`undefined`

A set of data to represent on the chart

Key

Prop	`dimensions[].key`
Type	`string`
Default	`undefined`

The key in the source data to represent on the X-axis

ID

Prop	`dimensions[].id`
Type	`string`
Default	`undefined`

The ID of this dimension

Name

Prop	`dimensions[].name`
Type	`string`
Default	`undefined`

The name of the dimension

Side

Prop	`dimensions[].side`
Type	`YAxisSides ('left' \| 'right')`
Default	`undefined`

Which side of the graph should the Y-Axis for this dimension appear

YKey

Prop	`dimensions[].yKey`
Type	`string`
Default	`undefined`

The key in the source data to represent on the Y-axis

Type

Prop	`dimensions[].type`
Type	`ChartTypes ('bar' \| 'line' \| 'scatter' \| 'none')`
Default	`undefined`

Which type of chart to use for this dimension

Mode

Prop	`dimensions[].mode`
Type	`ChartModes ('lines' \| 'markers' \| 'lines+markers')`
Default	`undefined`

How should the dimension be represented

LineShape

Prop	`dimensions[].lineShape`
Type	`ChartLineShapes ('linear' \| 'spline')`
Default	`undefined`

The style of the line representing this dimension

MarkerColor

Prop	`dimensions[].markerColor`
Type	`string`
Default	`undefined`

The color of this dimension on the chart

X Key

Prop	`xKey`
Type	`string`
Default	`x`

The key to use from the data source to provide the X values of the chart.

Horizontal axis title

Prop	`horizontalAxisTitle`
Type	`string`
Default	`Day`

The title to add for the X axis of the chart.

Left vertical axis title

Prop	`leftVerticalAxisTitle`
Type	`string`
Default	`Users`

The title to add for the left Y axis of the chart.

Right vertical axis title

Prop	`rightVerticalAxisTitle`
Type	`string`
Default	`undefined`

The title to add for the right Y axis of the chart.

Horizontal axis type

Prop	`horizontalAxisType`
Type	`ChartAxisTypes ('-' \| 'linear' \| 'log' \| 'date' \| 'category' \| 'multicategory')`
Default	`-`

The scale type to use for the X axis.

Left vertical axis type

Prop	`leftVerticalAxisType`
Type	`ChartAxisTypes ('-' \| 'linear' \| 'log' \| 'date' \| 'category' \| 'multicategory')`
Default	`-`

The scale type to use for the left Y axis.

Right vertical axis type

Prop	`rightVerticalAxisType`
Type	`ChartAxisTypes ('-' \| 'linear' \| 'log' \| 'date' \| 'category' \| 'multicategory')`
Default	`-`

The scale type to use for the right Y axis.

Background Color

Prop	`backgroundColor`
Type	`string`
Default	`undefined`

The background color of the component when instantiated.

Event Handlers

On Hover

Handler	`chartNode.onHover`

Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.

On Leave

Handler	`chartNode.onLeave`

Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.

Button Checkbox