Skip to main content

Chart

Chart widget takes the chart type, data and styles to draw charts using Plotly.js.

Support chart types:

  • Line charts
  • Bar charts
  • Pie charts

Line charts#

Data requirements:

The data needs to be an array of objects and each object should have x and y keys.

Example:

[
{ "x": "Jan", "y": 100},
{ "x": "Feb", "y": 80},
{ "x": "Mar", "y": 40}
]

The chart will look like this:

ToolJet - line charts

Bar charts#

Data requirements:

The data needs to be an array of objects and each object should have x and y keys.

Example:

[
{ "x": "Jan", "y": 100},
{ "x": "Feb", "y": 80},
{ "x": "Mar", "y": 40}
]

The chart will look like this:

ToolJet - line charts

Pie charts#

Data requirements:

The data needs to be an array of objects and each object should have label and value keys.

Example:

[
{ "label": "Jan", "value": 100 },
{ "label": "Feb", "value": 80 },
{ "label": "Mar", "value": 20 }
]

The chart will look like this:

ToolJet - line charts