Documentation Topics

Getting Started with Infinity Charts

Welcome to Infinity Charts, the ultimate visualization engine designed to turn your static Notion databases into real-time, high-fidelity, interactive charts and dashboards. Whether you are tracking annual recurring revenue, monitoring active users, managing project tasks, or visualizing target progress, Infinity Charts bridges the gap between raw data and aesthetic, actionable insight.

Infinity Charts works by connecting directly to the Notion API, scanning your database schemas, classifying property types, and rendering custom widgets. Let's walk through the end-to-end process of setting up your account, linking your first database, and rendering your first chart.


The 5-Minute Setup Guide

Building a chart takes less than five minutes. Here is the step-by-step workflow:

Step 1: Connect Your Notion Workspace

When you first log in, you will be prompted to link your Notion workspace.

1. Click the Connect Notion button.

2. You will be redirected to the secure Notion OAuth interface.

3. Choose the workspace you want to connect to.

4. Select the specific pages or databases you want Infinity Charts to access.

5. Click Allow Access to complete the handshake.

IMPORTANT
If you create a new database in Notion later, you must explicitly share it with the Infinity Charts integration, or it will not appear in your selector. See the Notion Connection & OAuth Guide for details.

Step 2: Choose Your Database

Once connected, navigate to the Studio. You will see a dropdown containing all of the databases you have shared. Select the database you want to visualize.

Step 3: Configure Your Chart Axes

Infinity Charts reads your database columns and classifies them.

  • X-Axis: Select a property that represents your groups or categories (e.g., Status, Select, Date, or Title).
  • Y-Axis: Select the property you want to aggregate (e.g., Estimate, Number, or Revenue). If you just want to count entries, you can select any property and set the aggregation to Count.

Step 4: Customize the Visualization

In the customization panel, choose your chart type:

  • Line/Bar/Ring: Great for standard metric distributions.
  • Radar/Scatter: Perfect for multi-variable profiling and relationships.
  • KPI/Progress: Standalone metric highlights and target gauges.

Adjust line smoothing, toggle cumulative summing, customize HSL color palettes, or set conditional formatting rules.

Step 5: Embed or Save to Dashboard

Once satisfied with your chart:

  • Save it to an interactive Dashboard workspace to combine it with other widgets.
  • Copy the Embed URL and paste it directly into Notion as an /embed block to see it live alongside your database.

Core Interface Overview

The Studio workspace is divided into three distinct functional zones:

1. Left Sidebar (Data Configuration): Choose your source database, configure X/Y axes, specify aggregation formulas, and set up filters.

2. Center Canvas (Real-Time Preview): A dynamic canvas that immediately updates as you change settings, letting you see your chart exactly as it will look when embedded.

3. Right Inspector (Style overrides & Rules): Adjust color palettes, toggle gridlines, add target reference lines, and configure conditional color rules.

TIP
What is HSL? Infinity Charts utilizes the HSL (Hue, Saturation, Lightness) color model. Unlike static Hex codes, HSL allows our rendering engine to mathematically rotate colors across a spectrum. If your query returns 10 different categories, our engine distributes their colors evenly across the hue wheel, ensuring distinct, beautiful, and non-clashing visual series automatically.

Troubleshooting Zero Data States

If your newly selected database renders a blank chart area, do not panic:

  • Zero-Data State: Infinity Charts displays a soft "No Data Found" message if the source database contains no valid records matching your axis selections.
  • Remedy: Go back to your Notion page, add at least 1–2 complete rows with data filled in the columns you selected for your X and Y axes, then click the Refresh Schema button in the Studio sidebar to trigger a fresh scan.