Chart

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/chart

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install recharts

Hooks

For responsive charts, you can use this hook (hooks/use-mobile.ts):

import { useEffect, useState } from "react"

const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined)

  useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}

Examples

Area

Area charts are great for showing trends, comparisons, and patterns over time. They keep your data clean and easy to read.

Bar

Bar charts help visualize data comparisons across categories. They are effective for highlighting differences and trends using vertical or horizontal bars.

Pie

Pie charts are useful for showing how parts contribute to a whole. They are best for displaying proportions and percentages in a visually appealing way.

Container height

When using charts, whether area, bar, or pie, you can control the container height to match your layout. Setting an explicit height ensures the chart renders correctly. If you want different heights for desktop and mobile, you can use the useIsMobile hook:

export default function App() {
  const isMobile = useIsMobile();

  return (
    <AreaChart
      containerHeight={isMobile ? 200 : 300}
      ...

If you do not set a height, the chart defaults to 370 on desktop and 200 on mobile.

Component API

CartesianGrid

The CartesianGrid component renders chart grid lines.

Chart

The Chart component provides shared chart context and layout.

ChartLegendContent

The ChartLegendContent component renders the chart legend items.

ChartLegend

The ChartLegend component renders the chart legend container.

ChartTooltip

The ChartTooltip component renders the chart tooltip container.

ChartTooltipContent

The ChartTooltipContent component renders chart tooltip content.

XAxis

The XAxis component renders the chart x-axis.

YAxis

The YAxis component renders the chart y-axis.

See the Recharts for the full API reference.