Skip to main content

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.

Configure Chart Widget

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.

note

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:

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.

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.

Configure Custom Chart
info

  • 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.

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.

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.

PropertyData typeDescription
Series TitleStringSets the title of the current Chart series.
Series ColorStringSets the color of the current Chart series.
Series DataArraySets the data of the current Chart series.
TitleStringSets the text that appears at the top of the chart as a title.
Chart TypeStringSets 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).
VisibleBooleanControls 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 LoadingBooleanWhen 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 ScrollBooleanAllows you to enable a scroll bar to scroll the contents of the chart.
x-axis LabelStringSets the text which appears as a label for the x-axis.
y-axis LabelStringSets the text which appears as a label for the y-axis.
x-axis Label OrientationStringSets the size/rotation behavior for the x-axis label text. Chose from Auto, Slant, Rotate, or Stagger.
Adaptive AxisBooleanDetermines 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.

PropertyData typeDescription
isVisibleBooleanThis property indicates whether the widget is visible or not.
selectedDataPointObjectContains an object which represents the data point that the user has most recently clicked (object containing: x, y, seriesTitle)._ Default _undefined.
xAxisNameStringStores the text of the x-axis Label setting of the chart.
yAxisNameStringStores the text of the y-axis Label setting of the chart.
chartDataObjectStores all the data needed to display the chart.

Style properties​

PropertyData typeDescription
Border RadiusStringRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowStringCasts 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.

EventDescription
onDataPointClickSpecifies an action to be performed when a user clicks on a data point in the chart.