LogoLogo
ProductsPricingGlossary Launch Acho
  • 🎉Welcome
  • Introduction
  • What is Acho?
  • How does Acho work?
    • Proof of Concept (PoC)
  • App Builder
    • Get Started
    • Core Concepts
    • Overview
    • App construction
      • App Configuration
      • Pages
      • Interactions
        • Add an interaction
        • Add conditions to interactions
        • Event payload
        • Ordering interactions with action flow
        • Transformer
        • Actions
          • Navigation
          • Element
          • Data Source
          • App
          • Page
          • API Service
          • Database
          • Media Service
      • Table
      • Metric
      • Query
      • Data Store
      • Elements
        • Table & Chart
          • Searchable Table
          • Table
          • Chart
          • Score Card
        • Form Elements
          • Form
          • Search Bar
          • Checkbox
          • Date Picker
          • Custom Form
          • Input
          • Multiselect
          • Radio Button
          • Radio List
          • Rich Text Editor
          • Select
          • Switch
          • Textarea
          • Upload
        • Web Elements
          • Badge
          • Button
          • Clickable
          • Collapse Menu
          • Divider
          • Icon
          • Image
          • Link
          • Message
          • Modal
          • Notification
          • Pagination
          • Popover
          • Rate
          • Rich Text
          • Tabs
          • Text
        • Layout Elements
          • Container
          • List
        • Advanced elements
          • Code Block
          • Condition
          • Print
        • CSS Styles
          • General techniques
          • Layout
          • Spacing
          • Size
          • Position
          • Typography
          • Background
          • Border
          • Effect
        • Form Check
        • Tooltip
      • Accessors
      • Plugin Store
    • Popular Use Cases
      • Build a chart from Table Nodes
      • Create a table
      • Create a list
      • Create a filter
      • Create a search bar
      • Use Custom Form Container to collect user inputs
      • Drill down on a table
      • Download file from query node
      • Set loading animations
      • Modify a database
      • Navigate to a different page
      • Set up dynamic routing
      • Update app data using accessors
      • Create a Chart with Code Block and D3 Library
      • Rich text and rich text editor
      • Send an Email via Mailjet Plugin
    • Preview
    • Publish
      • Embed published app on website
    • Version Control
    • App User Management
      • Onboarding Page
      • Sign in page
      • Guest Isolation and Private Session
    • Theme
    • FAQ
  • Acho Studio
    • Quick Start
    • Resources
      • Add a resource
      • Supported data sources
        • Airtable
        • Amazon Ads
        • Amplitude
        • Amazon Seller Partner
        • Apify Dataset
        • Appstore
        • Asana
        • API Connector
        • API Template
        • AWS CloudTrail
        • Azure Table Storage
        • Batch Files
        • Bamboo HR
        • BigCommerce
        • BigQuery
        • Bing Ads
        • Braintree
        • Cart.com
        • Chargebee
        • Chargify
        • Chartmogul
        • Clickhouse
        • Close.com
        • CockroachDB
        • Confluence
        • Customer.io
        • Delighted
        • Dixa
        • Drift
        • Facebook Marketing
        • Freshdesk
        • Freshsales
        • Freshservice
        • GitHub
        • GitLab
        • Google Ads
        • Google Analytics
        • Google Sheets
        • Google Search Console
        • Greenhouse
        • Harness
        • Harvest
        • HubSpot
        • IBM Db2
        • Instagram
        • Intercom
        • Iterable
        • Jenkins
        • Jira
        • Kafka
        • Klaviyo
        • Kustomer
        • Lemlist
        • Lever Hiring
        • LinkedIn Ads
        • Linnworks
        • Mailchimp
        • Marketo
        • Microsoft Teams
        • Mixpanel
        • Monday
        • MongoDB
        • MySQL
        • My Hours
        • NetSuite
        • Notion
        • Okta
        • OneDrive
        • OneSignal
        • Oracle DB
        • Outreach
        • PagerDuty
        • Paypal Transaction
        • Paystack
        • Pipedrive
        • PersistIq
        • Pinterest
        • Plaid
        • PostgreSQL
        • PostHog
        • PrestaShop
        • Qualaroo
        • QuickBooks
        • Recharge
        • Recurly
        • Remote File
        • S3
        • Salesforce
        • Salesloft
        • SearchMetrics
        • Sendgrid
        • Sentry
        • Short.io
        • Shopify
        • Single File
        • Slack
        • Smartsheets
        • Snapchat Marketing
        • Snowflake
        • SQL Server
        • Square
        • Stripe
        • SurveyMonkey
        • Tempo
        • TikTok Marketing
        • Trello
        • Twilio
        • Typeform
        • VictorOps
        • WooCommerce
        • YouTube Analytics
        • Zendesk Chat
        • Zendesk Sunshine
        • Zendesk Talk
        • Zendesk Support
        • Zenloop
        • Zoho CRM
        • Zoom
        • Zuora
    • Data Prep (Projects)
      • Create a Data Prep Project
        • Create a table tab
        • Copy a table tab
        • Hide a table tab
      • Apply an action
        • View
          • Hide Columns
          • Filter
          • Sort
          • Cut
          • Rename
          • Move Column
        • Combine Tables
          • Join
          • Union
        • Transformation
          • Pivot Table
          • Unpivot
        • Data Cleaning
          • Cleanse
          • Replace
          • Change Type
          • Deduplicate
          • Split
          • Flatten
        • Tools
          • Formula
          • SQL Editor
            • SQL Editor Queries
            • All functions in Formula/SQL
              • Mathematical Functions
              • String Functions
              • Date Functions
              • Datetime Functions
              • Time Functions
              • Timestamp Functions
              • Conditional Functions
              • Type Conversion
              • Other Functions
        • Reserved Keywords
      • Pipeline
      • Edit your pipelines
      • Generate column summary for inspection
      • Use URL to access and share your project
      • Write a description for your project
      • Delete a resources/project/tab
    • Data Flow
      • Export data
        • Download CSV files
        • Excel Connector
        • Google Sheets Connector
        • Embed a table on your website
          • Data Usage Agreement
        • Apache Superset
        • Chartio
        • Looker
        • Metabase
        • Power BI
        • Qlik
        • Tableau
        • MongoDB
        • MySQL
        • MSSQL
        • Snowflake
        • PostgreSQL
        • BigQuery
    • Set up Data Sync
    • FAQ
  • Organization
    • Get started
    • Create an organization
    • Invite people to your organization
    • Share your resources
    • Share your projects
    • Share your apps
    • Change payment method on file
  • FAQ
    • I can't find data after uploading a big CSV file
Powered by GitBook
On this page
  • Configuration
  • Properties
  • Chart Styles configuration
  • CSS
  • Supported Events
  • Supported Actions

Was this helpful?

  1. App Builder
  2. App construction
  3. Elements
  4. Table & Chart

Chart

PreviousTableNextScore Card

Last updated 1 year ago

Was this helpful?

The Chart element in Acho app builder provides a streamlined solution for data visualization serving various purposes, from business reporting, intricate business intelligence analytics to data science project.

Configuration

In the Chart configuration, there are three distinct tabs Property, Chart Styles and CSS, each responsible for a specific level of configuration.

Properties

Properties are the key options for constructing a chart.

Data source: Specify the data you want to visualize in the chart. The data source could be Table Node, Query Node, App data and Page data. For App data and Page data, it should be structured as an array of observations. Only for the Table Node, the system will automatically process and transform the data into a format suitable for chart construction. See Build a chart from Table Nodes for details.

Chart type: Choose a chart type to load a template. Options include: Line Chart, Stack Bar Chart, Grouped Bar Chart, Pie Chart, Area Chart, Scatter Plot, Heatmap, and Choropleth Map.

Dimension: Dimensions are qualitative values. They categorize and label data. For example, in a dataset containing sales figures of different products, 'Product category' could be a dimension. It is the 'what' aspect of your data, providing a context in which the numbers (metrics) can be understood.

Metric: Metrics are quantitative values. They provide measurable data to answer "How much?". For instance, in the previous example, the number of units sold would be the metric. Metrics provide the actual numbers that you'd typically plot on a chart to understand magnitude, trends, or comparisons.

Chart Styles configuration

Basic:

All chart types except Choropleth Map will have and x-field and y-field under the Basic section. By default the chart automatically select the first suitable Dimension and Metric as X-field and Y-field.

X-Field: Name of the data column to use for the x-axis (horizontal variable).

Y-Field: Name of the data column to use for the y-axis (vertical variable).

Some chart types may have additional basic fields to define.

Breakdown field(Z-Field): This field allows for a further breakdown or categorization of the data, providing an additional dimension for analysis.

Size(Scatter Plot): The name of data column to use for the size of points in scatter plot.

X-Axis and Y-Axis configuration

  • Scale: Choose how data is distributed. linear, log, pow or sqrt

  • Position: For the X-axis, decide if it appears at the 'Top' or 'Bottom'. For the Y-axis, set its position to 'Left' or 'Right'.

  • Title: Define the axis name and its appearance parameters such as its anchor point and color, etc.

  • Line: Customize the main axis line by setting its end cap style, color, and level of opacity, etc.

  • Tick: Customize the small axis marks, by setting its count, tick color, the way they're formatted.

  • Label: Customize the text appearing alongside the axis like label font, label align, label rotation, label color, etc.

  • Grid: Decide whether you want to display gridlines. If so, you can modify their color, style, and width, etc.

Title

Options for configuring the title and subtitle of the chart include settings for orientation, alignment, anchor, rotation, color, displacement values (dx, dy), font type, font size, text limit, and offset.

Marker Label

Marker labels are text annotations that are placed near data points or markers to provide additional information about those points, you can customize the Text, Offset, Font, Font size, Text align, Text baseline, Text rotation, Text Color, Label z-index.

Legends:

Whether the legend is displayed and its format, title, color, etc.

Chart Tooltip

The tooltip that pop-out when clicking the data point/area in the chart. You can customized the content and format of the tooltip.

CSS

General CSS styles like space, padding.

Supported Events

Choose a chart type to view the corresponding supported events

Supported Actions

Render: Send data in an array of JSONs to display on the chart.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.

X-axis and Y-axis configurations are for the information present on the two axis, mostly they follows d3 styles, see for more details:

D3 docs