# 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`Array of data points to render on the chart.`DataItem[]`
`series`Defines which data keys to use and their visual settings.`ChartSeries[] (e.g., [{ dataKey: 'value', label: 'Label', color: 'primary' }])`
`width`Chart width. Accepts number (pixels) or string (e.g. '100%').`number | string`
`height`Chart height. Accepts number (pixels) or string.`number | string`
`layout`Layout orientation of bars.`'horizontal' | 'vertical' (default: 'horizontal')`
`margin`Margins around the chart area.`{ top?: number; right?: number; bottom?: number; left?: number }`
`barRadius`Rounded corners on bars.`number (in pixels)`
`barSize`Width (or height) of each bar depending on layout.`number`
`barGap`Gap between two bars in the same category.`number | string (e.g. 4 or '10%')`
`barCategoryGap`Gap between two bar categories.`number | string (e.g. 20 or '30%')`
`showXAxis`Whether to show the X axis.`boolean`
`showYAxis`Whether to show the Y axis.`boolean`
`xAxisProps`Props to customize the X axis (e.g. ticks, styling).`any (Recharts XAxis props)`
`yAxisProps`Props to customize the Y axis.`any (Recharts YAxis props)`
`xInterval`Controls the interval of X axis ticks.`number`
`yInterval`Controls the interval of Y axis ticks.`number`
`showGrid`Toggles display of background grid lines.`boolean`
`gridProps`Props to customize the grid (e.g. stroke, dash).`any`
`showTooltip`Toggle to show tooltips on hover.`boolean`
`tooltipFormatter`Function to format tooltip content.`(value: any, name: string, props: any) => React.ReactNode`
`showLegend`Whether to display the legend below or beside the chart.`boolean`
`legendProps`Props to customize legend behavior or styling.`any`
`isAnimationActive`Toggles bar animation on mount/update.`boolean`
`funcss`Custom class or functional CSS string to style the chart container.`string`
#
Bar charts
Displays data as rectangular bars. Useful for comparing values across categories or groups.
React / Next.js
Area Chart
Displays quantitative data with filled areas under curves. Ideal for showing trends over time or comparisons among series.
PropDescriptionValue(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`
`dy`Give a top margin to the x labels`number`
`rotateLabel`Rotation angle for axis labels in degrees. Useful for preventing label overlap on crowded charts.`string | number (e.g., '45', 90, '-30')`
`xLabelSize`Font size for X-axis labels. Controls the text size of labels along the horizontal axis.`string | number (e.g., '12px', 14, '0.8rem')`
`yLabelSize`Font size for Y-axis labels. Controls the text size of labels along the vertical axis.`string | number (e.g., '12px', 14, '0.8rem')`
`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
Pie Chart
Displays categorical data as slices of a circular chart. Useful for showing part-to-whole relationships.
PropDescriptionValue(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