Skip to main content

Line Chart

A Line Chart connects data points with a continuous line and is typically used to visualize changes over time. For example, use it to present progress in a format that is easier to understand than a table of values.

Adding a Line Chart​

To add a Line Chart widget to your project:

  1. Add the Chart widget from Base Elements or the widget tree. The Line Chart is the default chart type.
  2. In the properties panel, open Chart Data and then expand [Line] Chart Data 1.
  3. Choose a Data Source:
    • Firestore Documents: Select the document list under Data and then choose the X Value Field and Y Value Field.
    • Numbers Lists: Set the X Data and Y Data lists. You can also provide X Labels and Y Labels.
  4. To display another line, click Add Data and configure the additional line.
  5. Under Chart Properties, adjust the chart's Width and Height as needed.
Using Firestore Documents

To use Firestore Documents, query a collection directly on the Chart widget or on a top-level widget such as a Page or Column.

Customizing the Line​

Select the Chart widget, open Chart Data, then expand Line Properties. Configure the line using these options:

  • Line Color: Sets the line color.
  • Line Thickness: Sets the width of the line.
  • Dashed Line: Displays the line using a dashed pattern.
  • Curved Lines: Connects data points with a smooth curve. Disable this option to use straight lines.
  • Prevent Overshooting: Keeps curved lines from extending beyond the actual data values.
  • Show Dots: Displays a dot at each data point.
  • Fill Below Line: Fills the area below the line. Use Fill Color to set the fill color.

Customizing the Chart​

You can customize the chart to match your design by changing the background color, setting axis bounds, showing grid lines, displaying borders, and more.