Chart
Chart widget is used to view the graphical representation of your data. Chart is the go-to widget for your data visualisation needs.

Properties

Property
Description
Title
Sets the title of the Chart widget.
Chart Data
Displays a chart based on an array of objects with X and Y values. You can transform the data from an API using a map. Note: Multiple series of data can be displayed in a single chart widget using the Add series button
{{ apiName.data.map((value) => { return { x: value.date, y: value.count } }) }}
Chart Type
Changes the type of chart displayed for the chart data. Available options are: Line chart, Bar chart, Pie Chart, Column Chart, and Area Chart, Custom Chart(new).
x-axis Label
Sets the label of the x-axis of your chart.
Allow Horizontal Scroll
Enables the horizontal scroll (x-axis scroll) inside the chart widget boundary.
y-axis Label
Sets the label of the y-axis of your chart.
Visible
Controls widget's visibility on the page. When turned off, the widget will not be visible when the app is published

Custom Chart

In case if your use-case is not covered in the offered chart types, custom chart option will let you extend all the functionalities offered by the underlying package Fusion Charts. To use this on the chart widget, you'll have to select Custom Chart type in the Chart Type property. Now, you'll find a Custom Fusion Chart Configuration property where you'll have to set the configuration of the fusion chart.
There are almost 100+ variants of Fusion Chart Configuration, learn more from the official docs here.
The new custom configuration requires an object with two keys, type and dataSource.
Property
Description
type
The type property takes in the type of fusion chart, you can find all the supported types here.
dataSource
dataSource consists of customization options and the data to be mapped for your chart. It essentially has two properties chart and type.
The chart object has options that are used to customize the chart for example, caption, x/y axis label etc. The data object is an array that you want to visualise, here's an example of how the data looks like : [{"label": string, "value": string},.. ]
Here's how the entire config should look like in the Custom Fusion Chart Configuration property:
1
{{
2
{
3
"type": "",
4
"dataSource": {
5
"chart": {},
6
"data": []
7
}
8
}
9
}}
Copied!
Here's a quick example to create a custom Fusion Chart on Appsmith:
Building a custom Fusion Chart on Appsmith
  1. 1.
    First, drag and drop a chart widget on to the canvas.
  2. 2.
    Open the Chart's property pane by clicking on the cog icon.
  3. 3.
    Next, choose Custom Chart option under Chart Type Property. You'll now find a new property named "Custom Fusion Chart Configuration"
  4. 4.
    Now inside the Custom Fusion Chart Configuration use the moustache syntax to configure your fusion chart and add the required properties.
  5. 5.
    In this case, we'll be building a column2d chart, hence, let's use the fusion chart properties inside the config.
1
{{
2
{
3
"type":"column2d",
4
"dataSource":{
5
"chart":{
6
7
},
8
"data":[
9
10
]
11
}
12
}
13
}}
Copied!
Next, add the following config to the chart and the data config:
1
{{
2
{
3
"type":"column2d",
4
"dataSource":{
5
"chart":{
6
"caption":"Monthly revenue for last year",
7
"subCaption":"Harry's SuperMart",
8
"xAxisName":"Month",
9
"yAxisName":"Revenues (In USD)",
10
"numberPrefix":"quot;,
11
"theme":"fusion"
12
},
13
"data":[
14
{
15
"label":"Jan",
16
"value":"420000"
17
},
18
{
19
"label":"Feb",
20
"value":"810000"
21
},
22
{
23
"label":"Mar",
24
"value":"720000"
25
},
26
{
27
"label":"Apr",
28
"value":"550000"
29
},
30
{
31
"label":"May",
32
"value":"910000"
33
}
34
],
35
"trendlines":[
36
{
37
"line":[
38
{
39
"startvalue":"700000",
40
"valueOnRight":"1",
41
"displayvalue":"Monthly Target"
42
}
43
]
44
}
45
]
46
}
47
}
48
}}
Copied!
Below are some more examples of customised Charts you can create from Fusion on Appsmith:

Sample Pareto 3D Chart:

Example of a Pareto 3D chart
A Pareto 3D chart offers a visualization of data that combines a line chart and column chart. To make one, you can edit the Custom Chart config below:
1
{{
2
{
3
"type":"",
4
"dataSource":{
5
"chart":{
6
7
},
8
"data":[
9
10
]
11
}
12
}
13
}}
Copied!
  1. 1.
    Set the type to pareto3d.
  2. 2.
    Inside the "chart" field you can add subfields of your choice. Some examples include "caption", "subcaption", and axis labels, such as "xaxisname" and "yaxisname".
  3. 3.
    Add your data inside the "data" field by using the subfields like "label" and "value".
Your pareto3d config should look something like this:
1
{
2
"type": "pareto3d",
3
"dataSource": {
4
"chart": {
5
"caption": "Common Car Damages",
6
"subcaption": "PitStop Service Station",
7
"xaxisname": "Reported Cause",
8
"yaxisname": "No. of Occurences",
9
"theme": "fusion",
10
"plottooltext":
11
"$label accounted for <b>$datavalue</b> cars which came for repairs"
12
},
13
"data": [
14
{
15
"label": "Burned out bulb",
16
"value": "41"
17
},
18
{
19
"label": "Discharged Battery",
20
"value": "20"
21
},
22
{
23
"label": "Blown fuse",
24
"value": "14"
25
},
26
{
27
"label": "Worn brake pads",
28
"value": "11"
29
},
30
{
31
"label": "Flat",
32
"value": "9"
33
},
34
{
35
"label": "Others",
36
"value": "5"
37
}
38
]
39
}
40
}
Copied!
You can customize the config however you like to suit your own needs.

Sample Pie 3D Chart:

Example of a Pie 3D chart
A Pie 3D chart helps you visualize proportions of a dataset in the form of a pie. To make one, you can edit the Custom Chart config below:
1
{{
2
{
3
"type":"",
4
"dataSource":{
5
"chart":{
6
7
},
8
"data":[
9
10
]
11
}
12
}
13
}}
Copied!
  1. 1.
    Set the type to pie3d.
  2. 2.
    Inside the "chart" field you can add subfields of your choice. Some examples include "caption", "subcaption", and flags such as "showvalues".
  3. 3.
    Add your data inside the "data" field by using the subfields like "label" and "value".
Your pie3d config should look something like this:
1
{
2
"type":"pie3d",
3
"dataSource":{
4
"chart": {
5
"caption": "Recommended Portfolio Split",
6
"subcaption": "For a net-worth of $1M",
7
"showvalues": "1",
8
"showpercentintooltip": "0",
9
"numberprefix": "quot;,
10
"enablemultislicing": "1",
11
"theme": "fusion"
12
},
13
"data": [
14
{
15
"label": "Equity",
16
"value": "300000"
17
},
18
{
19
"label": "Debt",
20
"value": "230000"
21
},
22
{
23
"label": "Bullion",
24
"value": "180000"
25
},
26
{
27
"label": "Real-estate",
28
"value": "270000"
29
},
30
{
31
"label": "Insurance",
32
"value": "20000"
33
}
34
]
35
}
36
}
Copied!
You can customize the config however you like to suit your own needs.

Sample Stacked Column 3D Chart:

Example of Stacked Column 3D chart
A Stacked Column 3D chart helps you compare data and show the composition of such data in the form of a 3D column chart. To make one, you can edit the Custom Chart config below:
1
{{
2
{
3
"type":"",
4
"dataSource":{
5
"chart":{
6
7
},
8
"data":[
9
10
]
11
}
12
}
13
}}
Copied!
  1. 1.
    Set the type to stackedcolumn3d.
  2. 2.
    Inside the "chart" field you can add subfields of your choice. Some examples include "caption", "subcaption", and axis labels such as "xaxisname" and "yaxisname".
  3. 3.
    Add your data inside the "data" field by using the subfields like "label" and "value".
1
{{
2
{
3
"type":"stackedcolumn3d",
4
"dataSource":{
5
"chart":{
6
7
},
8
"data":[
9
10
]
11
}
12
}
13
}}
Copied!
Next, add the following config for a stackedcolumn3d chart to the chart and the data config:
1
{
2
"type": "stackedcolumn3d",
3
"dataSource": {
4
"chart": {
5
"caption": "Deaths reported because of insect bites in India",
6
"yaxisname": "Number of deaths reported",
7
"subcaption": "(As per government records)",
8
"plottooltext":
9
"<b>$dataValue</b> people died because of $seriesName in $label",
10
"showsum": "0",
11
"theme": "fusion"
12
},
13
"categories": [
14
{
15
"category": [
16
{
17
"label": "1994"
18
},
19
{
20
"label": "1995"
21
},
22
{
23
"label": "1996"
24
},
25
{
26
"label": "1997"
27
}
28
]
29
}
30
],
31
"dataset": [
32
{
33
"seriesname": "Hymenoptera",
34
"data": [
35
{
36
"value": "15622"
37
},
38
{
39
"value": "10612"
40
},
41
{
42
"value": "15820"
43
},
44
{
45
"value": "26723"
46
}
47
]
48
},
49
{
50
"seriesname": "Diptera",
51
"data": [
52
{
53
"value": "3622"
54
},
55
{
56
"value": "2612"
57
},
58
{
59
"value": "5820"
60
},
61
{
62
"value": "6723"
63
}
64
]
65
}
66
]
67
}
68
}
Copied!
You can customize the config however you like to suit your own needs.
Last modified 13d ago