--- title: How to Add shadcn Charts to a Next.js App Without... description: A step-by-step tutorial walks through adding a shadcn/ui bar chart (built on Recharts) to a Next.js App Router project, using ChartCN, a free open-source tool... canonical: https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate | daily.dev og:description: A step-by-step tutorial walks through adding a shadcn/ui bar chart (built on Recharts) to a Next.js App Router project, using ChartCN, a free open-source tool... og:url: https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3 og:image: https://api.daily.dev/og/posts/sLeaRaXZ3.png og:image:alt: How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · 10 min read · 4 upvotes · 0 comments ## Summary A step-by-step tutorial walks through adding a shadcn/ui bar chart (built on Recharts) to a Next.js App Router project, using ChartCN, a free open-source tool that generates a single TSX chart file from pasted CSV/JSON/TSV/Markdown data. It covers initializing shadcn/ui, adding the chart component, generating and customizing a chart, understanding the generated code (theme color variables, chartConfig, ChartContainer), and passing live data from a Server Component via a typed prop. It also lists common errors (Recharts version mismatches, missing CSS variables, overwritten files, duplicate component names) and their fixes. The author built ChartCN and links to its GitHub repo and site throughout. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why am I getting a type error saying 'Property itemSorter does not exist' when using shadcn chart components? This error happens when a project has Recharts 2 installed instead of Recharts 3. The shadcn/ui chart component and chart generators like ChartCN target Recharts 3, so upgrading with npm install recharts@latest resolves the type mismatch and restores expected tooltip behavior. _daily.dev surfaces fixes like this for developers debugging Recharts version mismatches in shadcn projects._ ### Why are my shadcn chart bars rendering black with no legend colors? This happens when app/globals.css is missing the five chart theme variables (--chart-1 through --chart-5) that shadcn/ui relies on for color. Running npx shadcn@latest init again, or manually copying the chart variables from the shadcn/ui theming docs, restores the colors for both light and dark mode. _Developers theming shadcn charts can track fixes like this via daily.dev before hitting the same wall._ ### How do I show gaps instead of zero values in a Recharts bar chart with missing data? Type the data series as number | null instead of just number; a null value causes Recharts to render that bar as missing rather than as a bar of zero height. This is the approach used when passing live data as a prop to a shadcn/ui chart component, keeping genuine data gaps visually distinct from real zero values. _daily.dev helps developers wiring real data into Recharts charts avoid misleading zero-vs-null bugs._ ## Similar posts on daily.dev - [How to Build an Admin Dashboard Sidebar with shadcn/ui and Base UI](https://daily.dev/posts/how-to-build-an-admin-dashboard-sidebar-with-shadcn-ui-and-base-ui-gbxkpsjck) · freeCodeCamp · 16 upvotes · 0 comments - [Shadcn UI adoption guide: Overview, examples, and alternatives](https://daily.dev/posts/shadcn-ui-adoption-guide-overview-examples-and-alternatives-0pr6z5eli) · LogRocket · 1 upvotes · 0 comments - [Shadcn Releases Visual Project Builder](https://daily.dev/posts/shadcn-releases-visual-project-builder-1ptkzmoeh) · InfoQ · 74 upvotes · 1 comments - [How to Use Shadcn Select Components in React & Next.js Projects](https://daily.dev/posts/how-to-use-shadcn-select-components-in-react-next-js-projects-rxdrvxe9r) · C\# Corner · 3 upvotes · 1 comments - [The Importmap Guide to Shadcn: Beautiful UI with Zero Build Step](https://daily.dev/posts/the-importmap-guide-to-shadcn-beautiful-ui-with-zero-build-step-d5l0ls8jc) · Ruby Flow · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs), [#data-visualization](https://daily.dev/tags/data-visualization), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate","url":"https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3"},"datePublished":"2026-10-02T11:37:28.947Z","dateModified":"2026-10-02T11:37:51.359Z","description":"A step-by-step tutorial walks through adding a shadcn/ui bar chart (built on Recharts) to a Next.js App Router project, using ChartCN, a free open-source tool...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5f8e6227b9459d6fcbfd98eae2821ead?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5f8e6227b9459d6fcbfd98eae2821ead?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"freeCodeCamp","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"freeCodeCamp","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp","url":"https://daily.dev/sources/freecodecamp"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,nextjs,data-visualization,shadcn","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-to-add-shadcn-charts-to-a-next-js-app-without-writing-recharts-boilerplate-slearaxz3#faq","mainEntity":[{"@type":"Question","name":"Why am I getting a type error saying 'Property itemSorter does not exist' when using shadcn chart components?","acceptedAnswer":{"@type":"Answer","text":"This error happens when a project has Recharts 2 installed instead of Recharts 3. The shadcn/ui chart component and chart generators like ChartCN target Recharts 3, so upgrading with npm install recharts@latest resolves the type mismatch and restores expected tooltip behavior. daily.dev surfaces fixes like this for developers debugging Recharts version mismatches in shadcn projects."}},{"@type":"Question","name":"Why are my shadcn chart bars rendering black with no legend colors?","acceptedAnswer":{"@type":"Answer","text":"This happens when app/globals.css is missing the five chart theme variables (--chart-1 through --chart-5) that shadcn/ui relies on for color. Running npx shadcn@latest init again, or manually copying the chart variables from the shadcn/ui theming docs, restores the colors for both light and dark mode. Developers theming shadcn charts can track fixes like this via daily.dev before hitting the same wall."}},{"@type":"Question","name":"How do I show gaps instead of zero values in a Recharts bar chart with missing data?","acceptedAnswer":{"@type":"Answer","text":"Type the data series as number | null instead of just number; a null value causes Recharts to render that bar as missing rather than as a bar of zero height. This is the approach used when passing live data as a prop to a shadcn/ui chart component, keeping genuine data gaps visually distinct from real zero values. daily.dev helps developers wiring real data into Recharts charts avoid misleading zero-vs-null bugs."}}]} ```