# Charts
Charts are used to visualize data. They are useful for comparing values across categories or groups.
Home
/
Charts 
import { ChartPie } from "funuicss";
import { Lines } from "funuicss";
import { Bars } from "funuicss";
Bar Chart
Displays data as rectangular bars. Useful for comparing values across categories or groups.
PropDescriptionValue(s)
`data`An array of data objects, where each object represents one category or x-axis value. Each key in the object can represent a bar series.`Array<{ label: string; [key: string]: any }>`
`series`An array of series definitions, each specifying which dataKey to pull from the data object, with optional label and color.`Array<{ dataKey: string; label?: string; color?: string }>`
`showGrid`Determines whether to display grid lines in the background of the chart.`boolean`
`showLegend`If true, displays a legend describing each series (bar group).`boolean`
`showXAxis`If true, displays the X-axis with labels for each category.`boolean`
`showYAxis`If true, displays the Y-axis with value ticks.`boolean`
`layout`Sets the layout of the bar chart. 'horizontal' means categories are on the X-axis; 'vertical' puts them on the Y-axis.`'horizontal' | 'vertical'`
`funcss`Custom CSS class names applied to the container of the chart (ResponsiveContainer).`string`
#
Bar charts
Displays data as rectangular bars. Useful for comparing values across categories or groups.
React / Next.js
MondayTuesdayWednesday
  • Work Hours
  • Meetings
MondayTuesdayWednesday0248
  • Work Hours
Area Chart
Displays quantitative data with filled areas under curves. Ideal for showing trends over time or comparisons among series.
PropDescriptionValue(s)
`data`Array of data points used to plot the chart. Each object should contain labels and corresponding values for each series.`Array<{ [key: string]: string | number }>`
`series`Defines each series (line) to be drawn. Each series includes a `dataKey`, label, and optional color.`Array<{ dataKey: string; label: string; color?: string }>`
`fromColor`The starting gradient color for each area (can use CSS variables or hex codes).`string`
`toColor`The ending gradient color for each area (can use CSS variables or hex codes).`string`
`showGrid`Toggles the background grid lines for better readability.`boolean`
`showLegend`Displays a legend describing each series in the chart.`boolean`
`showXAxis`If true, shows the horizontal X-axis with labels.`boolean`
`showYAxis`If true, shows the vertical Y-axis with labels.`boolean`
`curveType`Specifies the type of curve to use for area lines: straight, monotone, stepped, or basis spline.`'linear' | 'monotone' | 'step' | 'basis'`
`funcss`Custom CSS class names to style the container of the chart (applied to ResponsiveContainer).`string`
#
Area Chart
Displays quantitative data with filled areas under curves. Ideal for showing trends over time or comparisons among series.
React / Next.js
  • Units Sold
  • Total Revenue
  • Total Revenue
Pie Chart
Displays categorical data as slices of a circular chart. Useful for showing part-to-whole relationships.
PropDescriptionValue(s)
`data`An array of data points to be displayed in the chart. Each object should contain a label, value, and optionally a color.`Array<{ label: string; value: number; color?: string }>`
`donut`If true, renders a donut chart by creating a hole in the center of the pie.`boolean`
`showLegend`Toggles the visibility of the legend explaining each pie segment.`boolean`
`funcss`Custom CSS class names to style the container of the chart (used on ResponsiveContainer).`string`
`width`Sets a fixed width for the pie chart. If not set, it defaults to 100% of its container.`number or string (e.g., 300 or '100%')`
`height`Sets a fixed height for the pie chart. If not set, it defaults to 300 pixels.`number or string (e.g., 300 or '100%')`
#
Pie Chart
Displays categorical data as slices of a circular chart. Useful for showing part-to-whole relationships.
React / Next.js
400300300
  • Apples
  • Bananas
  • Cherries