Chart

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/chart

Manual installation

Install the dependencies, then copy the component source into your project.

npm install recharts cn

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

Use area charts to show trends over time and compare series.

Bar

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

Pie

Use pie charts to compare categories as proportions of a whole.

Radar

Radar charts compare multiple dimensions on the same scale, making profiles and relative strengths easy to scan.

Radial bar

Radial bar charts use concentric arcs for compact category comparisons and progress-oriented metrics.

Container height

When using charts, 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

Chart

ChartLegendContent

ChartLegend

ChartTooltip

ChartTooltipContent

XAxis

YAxis