import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Chart

This page provides information on how to use the Chart widget to visualize and represent data to create admin panels, dashboards, and other data-driven applications.

<VideoEmbed host="youtube" videoId="MadSMf9SOaE" title="How to use Chart Widget" caption="Configure Chart Widget"/>

Content properties

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Data

Chart Type string

Series title string

Series color string

Series data array<object>

[
  {
    "x": "Product1",
    "y": 20000
  },..
]

In this format, x denotes the label, and y denotes the value. Additionally, you can display dynamic data from queries or JS functions by binding the response to the Series Data property. For example, if you have a query named fetchData, you can bind its response using:

Example:

{{fetchData.data}}

If the query data is not in the expected format, you can use the map() function to transform it before passing it to the widget, like:

Example:

{{fetchUserData.data.map( p => ({x: p.gender, y: p.count}))}}

:::note
If the query fails and there is no default data specified, the chart doesn't render and appears empty.
:::

Add Series string

Custom EChart Configuration

Expected data structure:

//Basic line chart format
{
 xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
  }]}

• xAxis specifies the type of data on the x-axis. For instance, you can use category as the type and provide an array of labeled values in the data field. The xAxis field is limited to specific chart types.

• yAxis specifies the type of data on the y-axis. For instance, to display values on the y-axis, you can set the type as value. The yAxis field is limited to specific chart types.

• series defines the data points and the type of chart:

  • type: You can specify the type of chart you want to display, such as line for a line chart or bar for a bar chart.
  • data: Contains an array of values or categories, depending on the chart type. Alternatively, you can dynamically update the data using mustache syntax, like {{Query1.data}}, enabling real-time data integration from external sources or queries, provided the data format aligns with the chart type's requirements.

See how to create a Custom EChart.

Custom Fusion Chart

Expected data structure:

{
  "type": "",
  "dataSource": {
    "chart": {},
    "data": []
  }
}

• Type : FusionCharts allows using JavaScript aliases for chart types. FusionCharts provides an extensive range of chart variants, with almost 100+ options to choose from. For example: "type": "column2d"

• Datasource : The datasource defines the customization options and data points necessary for creating a chart, should be defined in JSON format. It consists of attributes such as chart and data, which may vary depending on the chart type.

Each chart type has different configurations and options. To learn more about these charts and their specific configurations, you can refer to the official FusionCharts documentation. Copy the relevant code examples provided in the documentation and paste them into your project for easy implementation.

General

Title string

Visible boolean

{{Select1.selectedOptionValue === "Yes"}}

Animate Loading boolean

Axis

Adaptive Axis boolean

Events

onDataPointClick

Style properties

Style properties allow you to change the look and feel of the widget.

Border and shadow

Border radius string

Box Shadow string

Reference properties

Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use Chart1.isVisible.

xAxisName string

{{Chart1.xAxisName}}

yAxisName string

{{Chart1.yAxisName}}

chartData array<object>

{{Chart1.chartData}}

selectedDataPoint object: x, y, seriesTitle

Example:

//To access all the details of the selected data point:
{{Chart1.selectedDataPoint}}

//To access the label of the selected data point:
{{Chart1.selectedDataPoint.x}}

//To access the value of the selected data point:
{{Chart1.selectedDataPoint.y}}

isVisible boolean

{{Chart1.isVisible}}