Skip to content

<PageGraph>

The <PageGraph> component extends the <Graph> component, and handles whether the graph should be displayed on this page, automatically sets the slug prop of the <Graph> component to the current page’s slug, and the passed frontmatter properties.

import { PageGraph } from 'starlight-site-graph/components';

Display the graph component corresponding to the current page.

<PageGraph>
<span slot="title">Fancy Graph Title</span>
</PageGraph>
Preview
Fancy Graph Title

The visibility of the <PageGraph> component is determined, in order of precedence, by the following:

  1. This component’s showGraph prop
  2. The page’s visible frontmatter property
  3. The graphConfig’s visibilityRules configuration

The <PageGraph> component accepts the following props:

type: string (optional)

Determines the slug of the current page. If not provided, the slug will be determined by the current page’s URL.

type: GraphConfig

The configuration object for the graph, for information on what can be passed, check out the configuration documentation.
This overrides any configuration applied via the plugin settings or frontmatter.

type: { data: PageSiteGraphFrontmatter } (optional)

The frontmatter properties related to the current page, for more information of what properties can be passed via this object, check out the frontmatter config.

type: string (optional)

Additional classes to apply to the component.

type: boolean (optional)

Determines whether the graph should be displayed on this page. Will override both the page’s visible frontmatter property and the graphConfig’s visibilityRules configuration.

The title of the graph, displayed at the top of the graph component.