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 tailwind-merge

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

Chart

ChartLegendContent

ChartLegend

ChartTooltip

ChartTooltipContent

XAxis

YAxis