Lowcoder Documentation
  • Lowcoder overview
    • The "Hello World" walk
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Google Cloud Platform
      • Easypanel
      • Heroku
      • Raspberry Pi
      • Access local database or API
      • Update MongoDB Versions
      • Lowcoder Version Update
      • Traefik loadbalancer
      • SMTP Server
      • Migration from Openblocks
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
      • Multi-Workspace Mode
      • Single Workspace Mode
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • Lowcoder Marketplace
  • ✨Build Applications
    • Create a new App
      • App(s) Navigation
      • Modules
      • Version and Release Management
    • App Editor
      • Query & Editing Roundtrips
      • Bulk Editing
      • Keyboard shortcuts
      • Data selection & Javascript
      • Layers
      • Visual Components
        • Common Component Settings
        • Messages / Toast
        • Dashboard & Reporting
          • Table
          • Charts and graphs
            • Bar Chart
            • Line Chart
            • Pie Chart
            • Scatter Chart
            • CandleStick Chart
            • Funnel Chart
            • Gauge Chart
            • Graph Chart
            • Heatmap Chart
            • Radar Chart
            • Sankey Chart
            • Suburst Chart
            • Theme River Chart
            • Tree Chart
            • Treemap Chart
            • Mermaid Chart
          • Google Maps
        • Layout & Navigation
          • List View
          • Drawer
          • Modal
          • Navigation
          • Cascader
          • Tree / Tree Select
          • Link
          • Floating Button
          • Text
          • Step Control
          • Page Layout
          • Content Card
          • Tabbed Container
        • Data Collection & Forms
          • Form
          • Input Field Types
          • JSON Schema Form
        • Meeting & Collaboration
        • Project Management
        • Calendar & Scheduling
          • Calendar
          • Date & Date Range
          • Time & Time Range
        • Document & File Management
          • File upload
        • Item & Signature Handling
        • Multimedia & Animation
          • Image
        • Integration & Extension
        • Legacy & Deprecated
      • Option lists
      • Date handling
      • Use Markdown
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
    • Video Calls in Lowcoder
  • 🚀Connect your Data
    • Data source basics
      • Configure IP allowlists
    • Data sources in Lowcoder
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • Supabase
          • Supabase PostgreSQL
          • Supabase Assets API
          • Supabase RealTime
          • Supabase OAuth
        • PostgreSQL
        • Microsoft SQL Server
        • Oracle
      • NoSQL Databases
        • MongoDB
        • CouchDB
        • DynamoDB
      • InMemory Databases
        • Redis
      • File Storages
        • S3 File Storage
      • BigData & OLAP
        • Big Query
        • Snowflake
        • ClickHouse
        • Elasticsearch
      • Websocket Datasource
    • Query basics
      • Bind Query Data to Components
      • Query library
  • 🪄Workflows
    • n8n Integration
  • 💫Business Logic in Apps
    • Write JavaScript
      • JavaScript query
      • Temporary state
      • Transformers
      • Data responder
      • Built-in JS functions
  • 🙌Publish Apps
    • Share an App
    • Publish an App
    • Embed an App
      • Embed App in HTML Pages
      • Embed App in WordPress Pages
      • Embed Apps in React
      • Embed Apps in NEXT.JS
      • Native embed SDK
        • Build the SDK from Source
  • 🔥Lowcoder Extension
    • Opensource Contribution
      • Develop UI components for Apps
      • Develop Data Source Plugins
    • Use third-party libraries in Apps
      • Day.js Date handling
      • Import your own JavaScript Library
    • Custom component
    • Lowcoder Open REST API
  • Lowcoder for Enterprise
    • Custom branding
Powered by GitBook
LogoLogo

More to try...

  • Lowcoder Website
  • Free Cloud Platform
  • Github
  • Discord

© Lowcoder Software LTD

On this page
  • UI mode
  • Data format
  • Chart type
  • X-axis
  • Chart series
  • Echarts JSON
  • Common Properties of the Chart Components

Was this helpful?

  1. Build Applications
  2. App Editor
  3. Visual Components
  4. Dashboard & Reporting

Charts and graphs

Charts and graphs are visual representations of data that are used to simplify complex information and make it easier to understand. They can help highlight key insights and provide a quick summary of data that would otherwise be difficult to interpret. Charts and graphs come in different forms, such as bar graphs, line graphs, pie charts, scatter plots, and more, each suited for different types of data and analytical purposes.

Lowcoder allows you to insert multiple forms of charts and graphs into your apps to satisfy your needs in different use cases.

UI mode

Data format

In UI mode, the Chart component supports presenting data stored as an array of JS objects. Each object field corresponds to a column in tabular format. The objects in the following array contain three fields: date, fruit, and count.

[
  { "date": "2022-03-01", "fruit": "apple", "count": 4 },
  { "date": "2022-03-01", "fruit": "banana", "count": 6 },
  { "date": "2022-04-01", "fruit": "grape", "count": 10 },
  { "date": "2022-04-01", "fruit": "apple", "count": 3 },
  { "date": "2022-04-01", "fruit": "banana", "count": 2 }
]

You can also use JS code in {{}} to reference data from other components or queries, or to transform data to meet specific needs.

For example, the query result of query1 is as follows.

{
  "date": [
    "2022-03-01",
    "2022-03-01",
    "2022-04-01",
    "2022-04-01",
    "2022-04-01"
  ],
  "fruit": ["apple", "banana", "grape", "apple", "banana"],
  "count": [4, 6, 10, 3, 2]
}

You can transform it using transformer transformer1 with the following JS code.

let dates = query1.data.date
let fruits = query1.data.fruit
let counts = query1.data.count
let result = []
for (let i = 0; i < dates.length; i++) {
  result.push( {'date': dates[i], 'fruit': fruits[i], 'count': counts[i]} )
}
return result;

Then reference the value of the transformer {{transformer1.value}} as the data for the chart.

Chart type

Lowcoder supports four types of charts: bar chart, line chart, scatter chart, and pie chart. You can select the chart type in Properties > Data > Chart type. You can also customize the layout and style of your chart in Properties tab.

X-axis

Bar charts, line charts, and pie charts map values to categorical variables. Thus, in such charts, the X-axis usually shows non-numeric data—for example, date or department.

Chart series

In most types of charts, the Chart series (Y-axis) presents numeric values for the categories on X-axis. By default, Lowcoder populates all numeric fields to Y-axis. You can hide unnecessary fields in Properties > Chart series.

Echarts JSON

Common Properties of the Chart Components

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name
Type
Description

data

Array

Returns an Array containing the data fed to the chartsGeooMap component

lastInteractionData

Object

Returns an Object containing the details about the Location point, which a User interacted most lately

selectedPoints

Array

title

String

Returns title of the Chart

Common Events of the Chart Components

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name
Description

Select

Select event gets triggered when a User selects a Chart component

UnSelect

UnSelect event gets triggered when a User unselects a Chart component

Click

Click event gets triggered when a User clicks on a Chart component

PreviousTableNextBar Chart

Last updated 1 month ago

Was this helpful?

By default, Lowcoder automatically detects the X-axis data and its type. You can also manually select one among "Category axis", "Value axis", "Time axis", or "Log axis". For detailed information, see .

Apart from the built-in charts and graphs, you can also plot your data with , an open-source JS visualization library. You only need to complete the Configuration > Option field in JSON format. For detailed information, see and .

For an instance of using Echarts, see .

To style your charts, the is a good tool. It can export a JSON, which you also can use in the Workspace Themes section to style both Chart types. The native ones and the ECharts.

✨
X axis type
Apache ECharts
ECharts docs
ECharts examples
Stacked Area Chart
Theme Editor of ECharts