ChartContainer

Configuration object for chart data series.

Bar Chart Story

Usage

import { ChartContainer, useChart, ChartTooltipContent, ChartLegendContent } from '@tryvienna/ui'

<div className="w-[400px]">
  <ChartContainer config={barConfig}>
    <BarChart data={barData}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="month" tickLine={false} axisLine={false} />
      <YAxis tickLine={false} axisLine={false} />
      <ChartTooltip content={<ChartTooltipContent />} />
      <ChartLegend content={<ChartLegendContent />} />
      <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
      <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
    </BarChart>
  </ChartContainer>
</div>

Examples

Bar Chart Story

Bar Chart Story

<div className="w-[400px]">
  <ChartContainer config={barConfig}>
    <BarChart data={barData}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="month" tickLine={false} axisLine={false} />
      <YAxis tickLine={false} axisLine={false} />
      <ChartTooltip content={<ChartTooltipContent />} />
      <ChartLegend content={<ChartLegendContent />} />
      <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
      <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
    </BarChart>
  </ChartContainer>
</div>

Line Chart Story

Line Chart Story

<div className="w-[400px]">
  <ChartContainer config={lineConfig}>
    <LineChart data={lineData}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="month" tickLine={false} axisLine={false} />
      <YAxis tickLine={false} axisLine={false} />
      <ChartTooltip content={<ChartTooltipContent />} />
      <ChartLegend content={<ChartLegendContent />} />
      <Line
        type="monotone"
        dataKey="users"
        stroke="var(--color-users)"
        strokeWidth={2}
        dot={false}
      />
      <Line
        type="monotone"
        dataKey="sessions"
        stroke="var(--color-sessions)"
        strokeWidth={2}
        dot={false}
      />
    </LineChart>
  </ChartContainer>
</div>

Pie Chart Story

Pie Chart Story

<div className="w-[400px]">
  <ChartContainer config={pieConfig}>
    <PieChart>
      <ChartTooltip content={<ChartTooltipContent nameKey="name" />} />
      <ChartLegend content={<ChartLegendContent nameKey="name" />} />
      <Pie
        data={pieData}
        dataKey="value"
        nameKey="name"
        cx="50%"
        cy="50%"
        innerRadius={60}
        outerRadius={100}
      />
    </PieChart>
  </ChartContainer>
</div>

API Reference

ChartContainer

Prop	Type	Default	Description
id	string | undefined	-
config	ChartConfig	-

Also accepts all props from RechartsPrimitive.ResponsiveContainer.

useChart

useChart — Access chart configuration context.

ChartTooltipContent

ChartTooltipContent — Styled tooltip content for Recharts charts.

Prop	Type	Default	Description
active	boolean | undefined	-
payload	Payload<ValueType, NameType>[] | undefined	-
indicator	"line" | "dot" | "dashed"	dot
hideLabel	boolean	false
hideIndicator	boolean	false
label	any	-
labelFormatter	((label: any, payload: Payload<ValueType, NameType>[]) => React.ReactNode) | undefined	-
labelClassName	string | undefined	-
formatter	Formatter<ValueType, NameType> | undefined	-
color	string | undefined	-
nameKey	string | undefined	-
labelKey	string | undefined	-

Also accepts all props from RechartsPrimitive.Tooltip.

ChartLegendContent

ChartLegendContent — Styled legend content for Recharts charts.

Prop	Type	Default	Description
hideIcon	boolean	false
payload	Payload[] | undefined	-
verticalAlign	VerticalAlignmentType	bottom
nameKey	string | undefined	-

Also accepts all props from div.

Data Attributes

Component	data-slot
ChartContainer	"chart"
useChart	"use-chart"
ChartTooltipContent	"chart-tooltip-content"
ChartLegendContent	"chart-legend-content"