> ## Documentation Index
> Fetch the complete documentation index at: https://sportsindex.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Stats & Charts

> Visualize data with built-in chart and table blocks

The collection editor includes a full set of data visualization blocks so you can build stats-driven layouts without any external tools. Create bar charts, scatter plots, spider charts, head-to-head comparisons, and sortable data tables -- all directly on the canvas.

## Data Tables (Season Stats)

The **Season Stats** block is a sortable data table that works for any kind of tabular data, not just season stats.

<Steps>
  <Step title="Add the block">
    Drag **Season Stats** (listed as "Data Table" in the sidebar) from the Stats & Data section onto your canvas.
  </Step>

  <Step title="Enter data manually or upload a CSV">
    Double-click the block to open the data editor. You have two options:

    * **Manual entry** -- Type values directly into the table. Add rows and columns as needed.
    * **CSV upload** -- Click the upload button and select a CSV file. The data populates the table automatically.
  </Step>

  <Step title="Configure columns">
    Set column headers, alignment, and sort behavior. Visitors to your published collection can click column headers to sort the table.
  </Step>
</Steps>

<Callout type="tip">
  Data tables span 2-3 columns and work best at full width for datasets with many columns. For simpler comparisons, 2 columns is usually enough.
</Callout>

## Bar Charts

The **Bar Chart** block lets you compare values across categories with a clean, customizable bar chart.

<Steps>
  <Step title="Add a Bar Chart block">
    Drag it from the Stats & Data section. Bar charts can span 1-3 columns depending on how much space you want.
  </Step>

  <Step title="Enter your data">
    Double-click to open the chart editor. Add labels and values for each bar. You can customize colors and add a chart title.
  </Step>

  <Step title="Preview on the canvas">
    The chart renders live as you make changes, so you can see exactly how it will look on the published page.
  </Step>
</Steps>

## Scatter Plots

The **Scatter Plot** block visualizes the relationship between two variables. Each data point is plotted on an X-Y axis.

* Spans 2-3 columns for readability.
* Double-click to enter data points with X and Y values.
* Add axis labels and a title to provide context.

Scatter plots are especially useful for showing correlations -- for example, minutes played vs. points scored, or age vs. performance rating.

## Spider Charts

The **Spider Chart** (also called a radar chart) compares multiple attributes at once on a radial grid. It is ideal for player skill profiles or multi-category comparisons.

* Spans 1-2 columns -- compact enough to fit alongside other blocks.
* Double-click to define the attributes (axes) and their values.
* Supports overlaying multiple datasets for side-by-side comparison.

<Callout type="note">
  Spider charts work best with 4-8 attributes. Fewer than 4 makes the shape hard to read; more than 8 gets cluttered.
</Callout>

## Head-to-Head Comparisons

The **Head to Head** block puts two athletes or teams side by side with paired stat rows. Each row shows a stat name with values for both sides, making it easy to see who comes out ahead in each category.

<Steps>
  <Step title="Add a Head to Head block">
    Drag it from the Stats & Data section. It spans 2-3 columns.
  </Step>

  <Step title="Set up the two sides">
    Double-click to open the editor. Enter the names (and optionally photos) for each side of the comparison.
  </Step>

  <Step title="Add stat rows">
    Add as many stat rows as you need. Each row has a label (e.g., "Points Per Game") and a value for each side.
  </Step>
</Steps>

## Stats Header

The **Stats Header** block is a simple title banner for introducing a stats section. Use it above your charts and tables to give the section a clear label and optional subtitle. It spans 2-3 columns and pairs naturally with the data blocks below it.

## Shape Block

The **Shape** block adds decorative visual accents to your stats sections. Use it to add background shapes or color blocks behind your charts for a more polished look. Shapes can span 1-3 columns.

## Building a Stats Section

Here is a typical workflow for putting together a stats-focused layout:

<Steps>
  <Step title="Start with a Stats Header">
    Add a Stats Header block at the top to introduce the section (e.g., "2025 Season Statistics").
  </Step>

  <Step title="Add a data table">
    Drop in a Season Stats table spanning the full width with your raw data, either typed in or uploaded via CSV.
  </Step>

  <Step title="Add visualizations">
    Below the table, add a row of charts. For example, a Bar Chart in one column and a Spider Chart in the next column.
  </Step>

  <Step title="Include a comparison">
    Add a Head to Head block for a player or team matchup, or a Scatter Plot to show a trend across your dataset.
  </Step>
</Steps>

<Callout type="tip">
  You can mix stats blocks with other block types freely. Add a Pull Quote next to a chart, or an Image block with a player photo beside a Spider Chart. The grid layout handles any combination.
</Callout>