Chart

1007550250

MonTueWedThuFriSatSun

• Visits

Import

import {
  Chart,
  ChartBody,
  ChartContent,
  ChartPlot,
  ChartGrid,
  ChartBars,
  ChartLine,
  ChartYAxisLabels,
  ChartAxisLabels,
  ChartLegend,
  ChartLegendItem,
} from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/ChartExample.tsx

import {
  Chart,
  ChartAxisLabels,
  ChartBars,
  ChartBody,
  ChartContent,
  ChartGrid,
  ChartLegend,
  ChartLegendItem,
  ChartPlot,
  ChartYAxisLabels,
} from "@pelagornis/page/components";

const visits = [45, 52, 38, 65, 42, 80, 55];
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

export default function ChartDemo() {
  return (
    <Chart className="w-full">
      <ChartBody>
        <ChartContent>
          <ChartYAxisLabels values={visits} />
          <ChartPlot aria-label="Weekly page visits">
            <ChartGrid values={visits} />
            <ChartBars values={visits} seriesColor="brand" />
          </ChartPlot>
          <ChartAxisLabels labels={days} />
        </ChartContent>
      </ChartBody>
      <ChartLegend>
        <ChartLegendItem seriesColor="brand">Visits</ChartLegendItem>
      </ChartLegend>
    </Chart>
  );
}

Use in MDX

Chart is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx

---
title: Example
---

import ChartExample from "../../components/ChartExample";

<ChartExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/ChartExample.astro

---
import ChartExample from "../ChartExample";
---

<ChartExample client:load />

markdoc.config.mjs

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "chart-example": {
      render: component("./src/components/markdoc/ChartExample.astro"),
      selfClosing: true,
    },
  },
});

src/content/docs/example.mdoc

{% chart-example /%}

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	chart
axis_labels	chart-axis-labels
bar	chart-bar
bar_track	chart-bar-track
bars	chart-bars
body	chart-body
content	chart-content
grid	chart-grid
hit_area	chart-hit-area
legend	chart-legend
legend_item	chart-legend-item
line	chart-line
line_area	chart-line-area
line_stroke	chart-line-stroke
plot	chart-plot
plot_frame	chart-plot-frame
point	chart-point
tooltip	chart-tooltip
y_axis	chart-y-axis

Reference

• RefineUI · Chart for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.