Chart

For isolated previews, theme switching, and sandbox editing, open the Chart playground on holydocs.com .

When to use

Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Trend Lines

Multi-series line chart with tooltip, legend toggles, and a goal line.

mdx
<Chart  type="line"  title="Revenue trend"  description="Monthly revenue against target and weighted pipeline."  xKey="month"  height="auto"  data={[    {"month":"Jan","revenue":42000,"target":38000,"pipeline":51000},    {"month":"Feb","revenue":46800,"target":41000,"pipeline":54800},    {"month":"Mar","revenue":51200,"target":45000,"pipeline":59200},    {"month":"Apr","revenue":49800,"target":47000,"pipeline":61000},    {"month":"May","revenue":55600,"target":50000,"pipeline":64800},    {"month":"Jun","revenue":60200,"target":54000,"pipeline":70200}  ]}>  <ChartGrid vertical={false} />  <ChartLegend align="left" />  <ChartTooltip valueFormat="currency" />  <ChartXAxis />  <ChartYAxis tickFormat="currency" />  <ChartSeries dataKey="revenue" label="Revenue" />  <ChartSeries dataKey="target" label="Target" dashed />  <ChartSeries dataKey="pipeline" label="Pipeline" axis="right" />  <ChartYAxis position="right" tickFormat="currency" />  <ChartReferenceLine axis="y" value={60000} label="Quarter goal" dashed /></Chart>

Composed Mix

Bar + area composition with a highlighted campaign window.

mdx
<Chart  type="composed"  title="Demand mix"  description="Qualified signups, conversion rate, and projected pipeline in one surface."  xKey="week"  height="auto"  data={[    {"week":"W1","signups":180,"rate":24,"pipeline":36000},    {"week":"W2","signups":220,"rate":27,"pipeline":40200},    {"week":"W3","signups":248,"rate":31,"pipeline":43800},    {"week":"W4","signups":284,"rate":33,"pipeline":49600},    {"week":"W5","signups":264,"rate":30,"pipeline":47200},    {"week":"W6","signups":312,"rate":36,"pipeline":55800}  ]}>  <ChartGrid />  <ChartLegend align="left" />  <ChartTooltip />  <ChartXAxis />  <ChartYAxis tickFormat="integer" />  <ChartYAxis position="right" tickFormat="currency" />  <ChartSeries type="bar" dataKey="signups" label="Qualified signups" />  <ChartSeries type="line" dataKey="rate" label="Conversion rate" axis="left" dashed />  <ChartSeries type="area" dataKey="pipeline" label="Projected pipeline" axis="right" fillOpacity={0.18} />  <ChartReferenceArea x1="W3" x2="W4" label="Campaign push" /></Chart>

Stacked Bars

Stacked horizontal bars with brush support for denser datasets.

mdx
<Chart  type="bar"  title="Pipeline by team"  description="Each bar is stacked by stage and can switch series visibility from the legend."  xKey="team"  layout="vertical"  stacked  height="auto"  data={[    {"team":"Enterprise","qualified":24,"proposal":18,"negotiation":12},    {"team":"Mid-market","qualified":30,"proposal":22,"negotiation":14},    {"team":"SMB","qualified":42,"proposal":28,"negotiation":16},    {"team":"Partners","qualified":18,"proposal":12,"negotiation":8}  ]}>  <ChartLegend align="left" />  <ChartTooltip />  <ChartGrid vertical={true} horizontal={false} />  <ChartSeries dataKey="qualified" label="Qualified" stackId="stage" />  <ChartSeries dataKey="proposal" label="Proposal" stackId="stage" />  <ChartSeries dataKey="negotiation" label="Negotiation" stackId="stage" /></Chart>

Donut Split

Pie / donut chart with a centered summary.

mdx
<Chart  type="pie"  title="Acquisition split"  description="Share of sourced opportunities by channel."  xKey="channel"  height="auto"  innerRadius="62%"  outerRadius="86%"  data={[    {"channel":"Organic","share":38},    {"channel":"Partner","share":24},    {"channel":"Paid","share":18},    {"channel":"Community","share":12},    {"channel":"Outbound","share":8}  ]}>  <ChartLegend position="bottom" align="center" />  <ChartTooltip valueFormat="percent" />  <ChartSeries dataKey="share" label="Share" nameKey="channel" innerRadius="62%" outerRadius="86%" />  <ChartCenter label="Top channel" value="Organic" description="38% of sourced pipeline" /></Chart>

Radar Comparison

Radar chart for comparing multiple teams against the same scoring rubric.

mdx
<Chart  type="radar"  title="Team capability radar"  description="Normalized scores across product, GTM, and reliability disciplines."  xKey="metric"  height="auto"  data={[    {"metric":"Velocity","core":82,"growth":74,"platform":68},    {"metric":"Quality","core":78,"growth":66,"platform":88},    {"metric":"Reliability","core":72,"growth":61,"platform":92},    {"metric":"Insight","core":69,"growth":84,"platform":58},    {"metric":"Execution","core":88,"growth":79,"platform":73}  ]}>  <ChartLegend align="center" />  <ChartTooltip />  <ChartSeries dataKey="core" label="Core" />  <ChartSeries dataKey="growth" label="Growth" />  <ChartSeries dataKey="platform" label="Platform" /></Chart>

Props

Prop	Type	Default	Description
type	string	line	Chart family to render.
data	JSON	[]	JSON array of chart rows. Use valid JSON in MDX expressions.
xKey	string	--	Category key used for cartesian axes or pie labels.
height	string | number	auto	Chart stage height. Accepts numbers in px, CSS lengths, or "auto" for responsive defaults.
layout	string	horizontal	Use "vertical" for horizontal bar charts.
stacked	boolean	false	Stacks compatible area/bar series on the same baseline.
download	boolean	true	Shows the Download SVG control in the chart toolbar.
legend	boolean	true	Shows the interactive legend unless a child overrides it.
tooltip	boolean	true	Shows the hover tooltip unless a child overrides it.
grid	boolean	true	Shows the chart grid unless a child overrides it.

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<Chart  type="line"  title="Revenue trend"  description="Monthly revenue against target and weighted pipeline."  xKey="month"  height="auto"  data={[    {"month":"Jan","revenue":42000,"target":38000,"pipeline":51000},    {"month":"Feb","revenue":46800,"target":41000,"pipeline":54800},    {"month":"Mar","revenue":51200,"target":45000,"pipeline":59200},    {"month":"Apr","revenue":49800,"target":47000,"pipeline":61000},    {"month":"May","revenue":55600,"target":50000,"pipeline":64800},    {"month":"Jun","revenue":60200,"target":54000,"pipeline":70200}  ]}>  <ChartGrid vertical={false} />  <ChartLegend align="left" />  <ChartTooltip valueFormat="currency" />  <ChartXAxis />  <ChartYAxis tickFormat="currency" />  <ChartSeries dataKey="revenue" label="Revenue" />  <ChartSeries dataKey="target" label="Target" dashed />  <ChartSeries dataKey="pipeline" label="Pipeline" axis="right" />  <ChartYAxis position="right" tickFormat="currency" />  <ChartReferenceLine axis="y" value={60000} label="Quarter goal" dashed /></Chart>

Tips

• Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
• Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
• Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.

Related Components

More

• Interactive playground: Chart on holydocs.com
• Component library index: /components