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
      • SAAS Mode
      • Enterprise 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
  • Component Playground
  • Component Auto-Docs

Was this helpful?

  1. Build Applications
  2. App Editor
  3. Visual Components
  4. Dashboard & Reporting
  5. Charts and graphs

Line Chart

In Lowcoder, the Line Chart component is a powerful tool for visualizing trends and changes over time or across categories. It connects individual data points with lines, making it ideal for tracking progressions, comparisons, and patterns within datasets.

Key Features

1. Data Binding

The Line Chart component supports data binding through arrays of JavaScript objects. Each object represents a data point with specific fields corresponding to chart axes. For example:

[
  { "date": "2022-03-01", "category": "A", "value": 10 },
  { "date": "2022-03-02", "category": "B", "value": 15 },
  { "date": "2022-03-03", "category": "A", "value": 20 }
]

This structure allows for straightforward mapping of data onto the chart's axes. Additionally, you can utilize JavaScript within {{ }} to reference or transform data dynamically, enabling integration with other components or queries.

2. Chart Configuration

Customize the Line Chart through the Properties panel:

  • X-Axis Configuration: Define the X-axis to represent categories, values, time, or logarithmic scales, depending on your data.

  • Series Management: Manage multiple data series to compare different datasets within the same chart.

These configurations allow for a tailored visualization that aligns with your specific data representation needs.

3. Dynamic Data Transformation

Leverage JavaScript transformers to manipulate and format data before rendering:

let dates = query1.data.date;
let categories = query1.data.category;
let values = query1.data.value;
let result = [];

for (let i = 0; i < dates.length; i++) {
  result.push({ date: dates[i], category: categories[i], value: values[i] });
}

return result;

This approach is particularly useful when dealing with data from queries that require restructuring to fit the chart's expected format.

4. Styling and Theming

Enhance the visual appeal of your Line Chart by customizing styles:

  • Colors and Fonts: Adjust colors, fonts, and other stylistic elements to match your application's theme.

  • ECharts Integration: For advanced customization, integrate Apache ECharts by providing a JSON configuration in the chart's settings.

These styling options ensure that your chart aligns with the overall design aesthetics of your application.

Component Playground

Component Auto-Docs

PreviousBar ChartNextPie Chart

Last updated 25 days ago

Was this helpful?

✨
Lowcoder | rapid App & VideoMeeting builder for everyone.
Lowcoder | rapid App & VideoMeeting builder for everyone.