Uncodie
Technical DocumentationNo CodeTutorialsChangelogDisccord
No Code
No Code
  • 🏁Getting Stared
    • 🥳Introduction
      • What is Uncodie?
      • App
      • Figma No Code Plugin
        • How to associate your Figma token to Uncodie?
        • How to associate an Uncodie project to figma?
  • 📖Basic Concepts
    • 🧩Components
      • Screen Page
        • Screen Layout
        • Screen Content
      • Table View
        • Table View Header
        • Table View Row
        • Table View Cell
      • Form
        • Text Area
        • Selector
        • Input
        • Button
        • Output
      • HTML components
        • Headers
          • H1
          • H2
          • H3
          • H4
          • H5
        • Title
        • Parragraph
        • List
        • Iframe
        • Video
        • Audio
        • Link
        • Progress
        • Meta
        • Image
        • SVG
      • Advanced
        • Chart
          • Style Personalization
        • Repeat
        • Loading
    • 🎨Appearance
      • Visibility
      • CSS
      • Adaptative Design
      • Responsive Design
    • 🏗️Prototyping
      • Modals
      • Variants
      • Navigation
    • 🔤Variables
    • 💽Data Sources
      • Collections
      • Queries
      • Scripts
    • 🔍Data Binding
    • ⚡Actions
      • Scripts
      • Events
    • 🧑User Management
      • Privacy
    • 🍪SEO and Tracking
      • Capabilities
      • HTML Head Scripts
    • ☁️Publish and Deploy
      • Custom Domains
Powered by GitBook
On this page
  • Overview
  • Setup
  • Chart types
  • Line Chart
  • Area Chart
  • Bar Chart
  • Component Documentation

Was this helpful?

  1. Basic Concepts
  2. Components
  3. Advanced

Chart

Used to display a complete bar chart

Overview

Just add a query to your component and select the collection as the data source for your chart component.

Setup

  1. Select your screen frame in Figma

  2. Add a query for a collection in the Data section of the plugin

  3. Select your chart component in Figma

  4. Select Chart as the element type in the Component section of the plugin

  5. Select the previously added query as the data source parameter of your chart

  6. Select the X value for your chart

  7. Select the Y value for your chart

  8. Select the desired chart type

  9. Compile your project

Chart types

Line Chart

Area Chart

Bar Chart

Component Documentation

The Chart component is based on the library:

PreviousAdvancedNextStyle Personalization

Last updated 1 year ago

Was this helpful?

📖
🧩
React Plotly.jsplotlygraphs
Logo