# 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.
| Prop | Description | Value(s) |
|---|---|---|
| `data` | The dataset to be visualized, where each object represents one bar category with values for each series. | `DataItem[]` |
| `series` | Array of objects defining each data series to be drawn as bars, including label and color. | `ChartSeries[]` |
| `showGrid` | Toggles the Cartesian grid (horizontal and vertical dashed lines) behind the bars. | `boolean` |
| `showLegend` | Determines whether the legend (series labels) is shown at the top or bottom. | `boolean` |
| `showXAxis` | Controls whether the X-axis (category labels) is displayed. | `boolean` |
| `showYAxis` | Controls whether the Y-axis (value scale) is displayed. | `boolean` |
| `barRadius` | Controls the roundness of the top corners of each bar. | `number` |
| `barSize` | Sets the width (thickness) of each bar in pixels. | `number` |
| `funcss` | Custom CSS class names applied to the chart container for styling. | `string` |
| `width` | Sets the width of the chart container. Can be a number (pixels) or a percentage. | `number | string` |
| `height` | Sets the height of the chart container. Default is 300. | `number | string` |
| `margin` | Specifies the space around the chart (inside container) to prevent cropping or overlap. | `{ top?: number; right?: number; left?: number; bottom?: number }` |
| `xAxisProps` | Custom props passed to the XAxis component to control ticks, styling, angles, etc. | `object` |
| `yAxisProps` | Custom props passed to the YAxis component for ticks, domain, and styling. | `object` |
| `tooltipFormatter` | Function to customize the tooltip values (e.g., to format currency or dates). | `(value: any, name: string, props: any) => React.ReactNode` |
| `legendProps` | Additional props passed to the Legend component to control layout, alignment, etc. | `object` |
#
Bar charts
Displays data as rectangular bars. Useful for comparing values across categories or groups.
React / Next.js
- Work Hours
- Meetings
- Work Hours
Area Chart
Displays quantitative data with filled areas under curves. Ideal for showing trends over time or comparisons among series.
| Prop | Description | Value(s) |
|---|---|---|
| `id` | Sets the HTML id attribute for the element. | `` |
| `horizontalLines` | If true, displays horizontal lines on the chart. | `boolean` |
| `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 }>` |
| `dy` | Give a top margin to the x labels | `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` |
| `` | `` |
#
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.
| Prop | Description | Value(s) |
|---|---|---|
| `data` | Array of objects representing each pie slice. Each object must include a label and value, and can optionally include a color. | `PieDataItem[]` |
| `donut` | If true, creates a donut chart by adding a hollow center using innerRadius. | `boolean` |
| `showLegend` | Controls whether the legend displaying slice labels appears below or beside the chart. | `boolean` |
| `funcss` | Custom CSS class applied to the container of the pie chart for styling purposes. | `string` |
| `width` | Sets a fixed width for the chart. If omitted, ResponsiveContainer is used instead. | `number | string` |
| `height` | Sets a fixed height for the chart. If omitted, ResponsiveContainer is used instead. | `number | string` |
| `outerRadius` | Specifies the outer radius of the pie chart. Controls how large the chart appears. | `number` |
| `innerRadius` | Specifies the inner radius of the pie chart. Used for customizing donut thickness. Ignored if donut is false. | `number` |
| `tooltipFormatter` | Custom formatter function for the tooltip values. Useful for formatting currency, counts, or percentages. | `(value: any, name: string, props: any) => React.ReactNode` |
| `legendProps` | Additional props passed to the Legend component to control position, layout, and style. | `object` |
#
Pie Chart
Displays categorical data as slices of a circular chart. Useful for showing part-to-whole relationships.
React / Next.js
- Apples
- Bananas
- Cherries