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:

React Plotly.jsplotlygraphs