v1.3
Core Concepts
Datasource Reference
Framework Reference
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,typeanddataSource.
Property
Description
type
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.First, drag and drop a chart widget on to the canvas.
- 2.Open the Chart's property pane by clicking on the cog icon.
- 3.Next, choose
Custom Chartoption under Chart Type Property. You'll now find a new property named "Custom Fusion Chart Configuration" - 4.Now inside the
Custom Fusion Chart Configurationuse the moustache syntax to configure your fusion chart and add the required properties. - 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.Set the type to
pareto3d. - 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.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.Set the type to
pie3d. - 2.Inside the
"chart"field you can add subfields of your choice. Some examples include"caption","subcaption", and flags such as"showvalues". - 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.Set the type to
stackedcolumn3d. - 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.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