export const title = "Line & bar chart components"
export const description = "Free and open-source React line and bar chart components built for modern applications and websites. These line and bar charts are built using Recharts and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/charts",
    recharts: "https://recharts.org/en-US/api/LineChart",
}

import * as LineCharts from "@/components/application/charts/line-charts.story.tsx";
import * as BarCharts from "@/components/application/charts/bar-charts.story.tsx";

<PreviewAndCode title="Line chart example">
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <LineCharts.LineChart01 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="line-charts/LineChart01" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this line and bar charts component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add charts-base
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our line and bar charts component is built with [Recharts](https://recharts.org/en-US/), you'll need to install the dependencies:
                ```bash
                npm install recharts
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/charts-base" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the line and bar charts components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Chart examples

Below are examples and variations of this line and bar charts component:

### Line chart 01 {{ tocOnly:true }}

<PreviewAndCode title="Line chart 01">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <LineCharts.LineChart01 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="line-charts/LineChart01" />
    </TabPanel>
</PreviewAndCode>

### Line chart 02 {{ tocOnly:true }}

<PreviewAndCode title="Line chart 02">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <LineCharts.LineChart02 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="line-charts/LineChart02" />
    </TabPanel>
</PreviewAndCode>

### Line chart 03 {{ tocOnly:true }}

<PreviewAndCode title="Line chart 03">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <LineCharts.LineChart03 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="line-charts/LineChart03" />
    </TabPanel>
</PreviewAndCode>

### Line chart 04 {{ tocOnly:true }}

<PreviewAndCode title="Line chart 04">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <LineCharts.LineChart04 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="line-charts/LineChart04" />
    </TabPanel>
</PreviewAndCode>

### Bar chart 01 {{ tocOnly:true }}

<PreviewAndCode title="Bar chart 01">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <BarCharts.BarChart />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="bar-charts/BarChart" />
    </TabPanel>
</PreviewAndCode>

### Bar chart 02 {{ tocOnly:true }}

<PreviewAndCode title="Bar chart 02">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <BarCharts.BarChart02 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="bar-charts/BarChart02" />
    </TabPanel>
</PreviewAndCode>

### Bar chart 03 {{ tocOnly:true }}

<PreviewAndCode title="Bar chart 03">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 px-4 md:px-8 py-32 min-h-[320px] items-center justify-center  ring-1 ring-inset ring-secondary bg-primary">
        <BarCharts.BarChart03 />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="bar-charts/BarChart03" />
    </TabPanel>
</PreviewAndCode>