Chart
This document explains how to use the Chart widget effectively to visualize and represent data to create admin panels, dashboards, and other data-driven applications.
Display data
To display data in the Chart widget, you can use the Series Data property to provide the data in the following structure:
[
{
"x": "Product1",
"y": 20000
},..
]
In this format, x
denotes the label, and y
denotes the value.
Appsmith offers several built-in charts to represent your data. With the Chart Type property, you can select one of the following types to visualize your data:
- Line Chart,
- Bar Chart,
- Pie Chart,
- Column Chart,
- Area Chart, and
- Custom Chart
You can display dynamic data from queries or JS functions by binding the response to the Series Data property.
For example, suppose you have a database containing information about assets in your organization, such as their types and the date they were purchased. You can create a query getAssetsByType
that groups the assets by type and count how many there are of each type, as shown below:
select type as x, count (*) as y from asset group by type
This query returns data in the required format, where x
represents the asset type and y
represents the count of assets of that type. To bind the response returned by the query to the chart, add {{assetquery.data}}
in the chart widget's Series Data property. This displays a chart that updates dynamically based on the response sent by the query.
If the query fails and there is no default data specified, the chart doesn't render and appears empty.
Transform data using JS
You can also use JavaScript code to transform the data retrieved to match the expected structure in the chart.
For example, suppose you have business revenue data fetched from an API getRevenue
and want to display it in a chart. You can transform the data using the map()
JS function as shown below:
{{getRevenue.data.map( p => ({x: p.year, y: p.amount}))}}
The code uses the map()
function to transform each item in the getRevenue.data
array into an object with an x
and a y
key.
In this example, x
represents the year, and y
represents the amount of money for that year. The transformed data displays the chart that updates dynamically based on the response sent by the API query.
Plot multiple data series
If you want to display multiple data series on a chart, you can do so by using the Add Series property. This feature allows you to populate the chart with different sets of data and customize various aspects of its appearance, such as colors and labels, to create a visually appealing and informative chart.
For example, suppose you have data on the number of males and females who voted each year, you can use the Chart Series property to display both data sets on the same chart. This would allow you to compare the number of male and female voters over time.
The following section demonstrates the different types of built-in charts for data visualization:
- Line Chart
- Bar Chart
- Column Chart
- Area Chart
- Pie Chart
A line chart displays data as a series of points connected by a line. It's a useful tool for representing data that changes over time, such as stock prices or temperature fluctuations.
By adding multiple series, you can compare the relationships between different sets of data over time, just like in the political election example.

A bar chart displays data as a series of rectangular bars of varying lengths, with each bar representing a category or group.
It's commonly used to compare different data points, such as sales figures for different products. By adding multiple series, you can compare and contrast data across different categories.

A column chart is similar to a bar chart, but the bars are arranged vertically instead of horizontally.
It's often used to display data in a more compact format or to make comparisons between groups of data. Adding multiple series can help you visualize relationships and differences between data across different categories.

An area chart is a type of line chart where the space between the line and the x-axis is filled with color, creating an area.
It's often used to display trends over time, such as changes in revenue or population. Multiple series can be added to compare the relationship between different sets of data over time, similar to the example with the political election data.

A pie chart displays data as a circular graph, with each slice representing a portion of the whole. It's commonly used to show the proportion of each category in a set of data. Only a single series of data can be used to plot a pie chart.

Custom charts
Appsmith offers integration with FusionCharts and provides a wide range of chart types that can be used to create custom charts. Once you have selected the Chart Type > Custom Chart, you can configure FusionCharts using the Custom Fusion Chart property.
Appsmith is integrated with FusionCharts and has acquired a re-distribution license. This license lets you use FusionCharts on the Appsmith cloud and self-hosted platforms. The use of the license is permitted as long as what you are building on Appsmith isn't used to compete with FusionCharts.
The license doesn't include permission to use Fusion Maps. You may need to obtain a separate license if you want to use this product.
Display data in custom chart
In the Custom Fusion Chart property, you need to specify "type" for chart type and "dataSource" for the data to create a custom FusionChart. Below is an example of a configuration for the Custom Fusion Chart property:
{
"type": "",
"dataSource": {
"chart": {},
"data": []
}
}
Type
The type is used to define the chart type recognized by the FusionCharts. FusionCharts provides an extensive range of chart variants, with almost 100+ options to choose from. You can refer to the official FusionCharts documentation documentation to learn more about these charts.
Datasource
The datasource defines the customization options and the data points to create a chart. It includes two attributes: chart and data.
The chart object can customize the chart and includes options like caption, xAxisName, and yAxisName. On the other hand, the data attribute represents the data in an array format with key-value pairs like [{“label”: “string value”, “value”: “string value”}]
.
Examples
Here are some examples of custom charts that you can use as a reference to create your own customized charts.
- 2D column
- Pareto 3D
- Pie 3D
- Stacked Column 3D
- Dual axis
Suppose you want to create a custom FusionChart to display monthly revenue data for Harry's SuperMart. You can use a two-dimensional column chart for this purpose.
You can either embed the configuration directly or use a query to retrieve the required configuration. To plot a column chart in a 2-dimensional, you can use the configuration as below:
{
"type": "column2d",
"dataSource": {
"chart": {
"caption": "Monthly Revenue for the year 2021",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [
{
"label": "Jan",
"value": 42000
},
{
"label": "Feb",
"value": 810000
},
{
"label": "Mar",
"value": 72000
},
{
"label": "Apr",
"value": 55000
},
{
"label": "May",
"value": 91000
}
]
}
}
In the preceding code snippet, you’ll see that you plotted a column chart to showcase the monthly revenue pattern for last year, say - 2021.
If you have several sister companies operating under the same business name and you want to display the monthly revenue chart specifically for Harry's SuperMart, you can use the subCaption
property to specify the name of the company.
“subCaption”: "Harry's SuperMart"
To format the revenue values on the chart, you can choose a series (y-axis
) to show $
as a prefix. You can use numberPrefix
and add the dollar($) sign.
“numberPrefix": "$"
You have a monthly target revenue of say $70,000 and would want to plot it in the chart. You can use trendlines
to add this detail to your chart.
"trendlines": [
{
"line": [
{
"startValue": "700000",
"valueOnRight": "1",
"displayvalue": "Monthly Target"
}
]
}
]
trendlines
are vertical or horizontal lines that help users understand the emphasized data point. For example, a monthly target.
Pareto chart is a type of bar graph that display the frequency of change with bars following a pattern from longest on the left to shortest on the right. To visualize data, a Pareto 3D chart can be used which combines a line chart and a column chart.

To display a Pareto 3D chart for "Harry's SuperMart" example, modify the type value in the configuration to pareto3d
:
{
"type": "pareto3d",
"dataSource": {
"chart": {
"caption": "Monthly Revenue for the year 2021",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [
{
"label": "Jan",
"value": 42000
},
{
"label": "Feb",
"value": 810000
},
{
"label": "Mar",
"value": 72000
},
{
"label": "Apr",
"value": 55000
},
{
"label": "May",
"value": 91000
}
]
}
}
You can add the below code snippet to have a customized tooltip.
"plottooltext": "$label accounted for <b>$datavalue</b> revenue"
Pie chart is a type of data visualization that represents numerical data in a circular graph, where the size of each "slice" of the pie corresponds to the proportion of data it represents.

To display a Pie 3D chart for "Harry's SuperMart" example, modify the type value in the configuration to pie3d
:
{
"type": "pie3d",
"dataSource": {
"chart": {
"caption": "Monthly Revenue for the year 2021",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [
{
"label": "Jan",
"value": 42000
},
{
"label": "Feb",
"value": 810000
},
{
"label": "Mar",
"value": 72000
},
{
"label": "Apr",
"value": 55000
},
{
"label": "May",
"value": 91000
}
]
}
}
For a sliced view, you can use a property enablemultislicing
:
"enablemultislicing": "1"
A stacked column chart is a type of data visualization that allows for the comparison of parts of a whole over time or across different sets of data.

For example, here the chart is designed to show the number of reported deaths due to insect bites in India, broken down by the type of infection (Hymenopter
or Diptera
) and by year (1994-1997
).
{
"type": "stackedcolumn3d",
"dataSource": {
"chart": {
"caption": "Deaths reported because of insect bites in India",
"yaxisname": "Number of deaths reported",
"subcaption": "(As per government records)",
"plottooltext": "<b>$dataValue</b> people died because of $seriesName in $label",
"showsum": "0",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "1994"
},
{
"label": "1995"
},
{
"label": "1996"
},
{
"label": "1997"
}
]
}
],
"dataset": [
{
"seriesname": "Hymenoptera",
"data": [
{
"value": "15622"
},
{
"value": "10612"
},
{
"value": "15820"
},
{
"value": "26723"
}
]
},
{
"seriesname": "Diptera",
"data": [
{
"value": "3622"
},
{
"value": "2612"
},
{
"value": "5820"
},
{
"value": "6723"
}
]
}
]
}
}
A dual-axis chart is a type of chart that combines columns, lines, and areas to display two sets of data with different value ranges.

The chart type used is mscombidy2d
, which stands for Multi-series Combination Dual Y-Axis 2D chart.
The chart displays data for revenue, profits, and number of employees over time, with revenue and profits represented by columns and an area, and the number of employees represented by a line. The chart also includes various chart properties, such as the chart caption, axis names, and chart theme.
{
"type": "mscombidy2d",
"dataSource": {
"chart": {
"caption": "Revenue, Profits & Number of employees",
"drawcrossline": "1",
"yaxisname": "Revenue / Profit (in $)",
"syaxisname": "Number of employees",
"showvalues": "0",
"showanchors": "0",
"numberprefix": "$",
"plothighlighteffect": "fadeout",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Mar-2012"
},
{
"label": "Jun-2012"
},
{
"label": "Sept-2012"
},
{
"label": "Dec-2012"
},
{
"label": "Mar-2013"
}
]
}
],
"dataset": [
{
"seriesname": "Revenue",
"plottooltext": "Revenue in $label : <b>$dataValue</b>",
"data": [
{
"value": "36000"
},
{
"value": "22000"
},
{
"value": "24000"
},
{
"value": "42000"
},
{
"value": "35000"
}
]
},
{
"seriesname": "Profit",
"plottooltext": "Profit in $label : <b>$dataValue</b>",
"renderas": "area",
"showvalues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
}
]
},
{
"seriesname": "Number of Employees",
"parentyaxis": "S",
"renderas": "line",
"showvalues": "0",
"plottooltext": "$value employees",
"data": [
{
"value": "31"
},
{
"value": "25"
},
{
"value": "35"
},
{
"value": "29"
},
{
"value": "25"
}
]
}
]
}
}
Properties
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
Widget properties
These properties are present in the property pane of the widget. The following table lists all the widget properties.
Property | Data type | Description |
---|---|---|
Series Title | String | Sets the title of the current Chart series. |
Series Color | String | Sets the color of the current Chart series. |
Series Data | Array | Sets the data of the current Chart series. |
Title | String | Sets the text that appears at the top of the chart as a title. |
Chart Type | String | Sets the type of Chart used to display data. Choose one of the charts from the available options, or create a custom chart (available from FusionCharts). |
Visible | Boolean | Controls widget's visibility on the page. When turned off: The widget won't be visible when the app is published. It appears translucent when in Edit mode. |
Animate Loading | Boolean | When turned off, the widget loads without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by enabling the JS label next to it. |
Allow Scroll | Boolean | Allows you to enable a scroll bar to scroll the contents of the chart. |
x-axis Label | String | Sets the text which appears as a label for the x-axis. |
y-axis Label | String | Sets the text which appears as a label for the y-axis. |
x-axis Label Orientation | String | Sets the size/rotation behavior for the x-axis label text. Chose from Auto, Slant, Rotate, or Stagger. |
Adaptive Axis | Boolean | Determines the scaling behavior of the y-axis. OFF: The y-axis begins at zero and spans to an upper limit based on the data points; ON: The y-axis starting and ending values are both determined based upon the data points. |
Reference properties
These properties can be referenced in other widgets, queries, or JS functions using the dot operator. For instance, to get the xAxisName, you can use Chart1.xAxisName
.
Property | Data type | Description |
---|---|---|
isVisible | Boolean | This property indicates whether the widget is visible or not. |
selectedDataPoint | Object | Contains an object which represents the data point that the user has most recently clicked (object containing: x, y, seriesTitle)._ Default _undefined. |
xAxisName | String | Stores the text of the x-axis Label setting of the chart. |
yAxisName | String | Stores the text of the y-axis Label setting of the chart. |
chartData | Object | Stores all the data needed to display the chart. |
Style properties
Property | Data type | Description |
---|---|---|
Border Radius | String | Rounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values. |
Box Shadow | String | Casts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values. |
Events
These are functions that are called when event listeners are triggered in the widget. Use actions to execute tasks based on user events.
Event | Description |
---|---|
onDataPointClick | Specifies an action to be performed when a user clicks on a data point in the chart. |