Installation
Usage
import { EvilAreaChart } from "@/components/evilcharts/charts/area-chart";<EvilAreaChart
xDataKey=""
stackType="stacked"
curveType="monotone"
strokeVariant="dashed"
areaVariant="gradient"
activeDotVariant="default"
data={data}
chartConfig={chartConfig}
/>Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilAreaChart
data={data}
chartConfig={chartConfig}
isClickable={true}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
/>Loading State
The area chart supports loading state. You can pass the isLoading prop to the chart to show the loading state. You can also pass curveType to customize the curve type of the loading state. Here, im using curveType='bump' to make the loading state more realistic.
Examples
Below are some examples of the area chart with different variants. where you can change the stackType, curveType, strokeVariant & areaVariant.
Gradient Colors
Curve Types
Stack Types
Stroke Variants
Area Variants
API Reference
Data used to display the chart. An array of objects where each object represents a data point.
type: TData[] where TData extends Record<string, unknown>
Configuration object that defines the chart's series. Each key should match a data key in your data array, with a corresponding color or color array.
type: Record<string, ChartConfig[string]>
The key from your data objects to use for the X-axis values.
type: keyof TData & string
The key from your data objects to use for the Y-axis values.
type: keyof TData & string
Additional CSS classes to apply to the chart container.
type: string
The type of curve interpolation for the area lines. Determines how points are connected.
type: "basis" | "basisClosed" | "basisOpen" | "bumpX" | "bumpY" | "bump" | "linear" | "linearClosed" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | "stepBefore" | "stepAfter"
default: "linear"
The visual style variant for the area fill.
type: "gradient" | "gradient-reverse" | "solid" | "dotted" | "lines" | "hatched"
default: "gradient"
The visual style for the area stroke lines.
type: "solid" | "dashed" | "animated-dashed"
default: "dashed"
Controls how multiple areas are stacked. "default" renders areas independently, "stacked" stacks them on top of each other, and "expanded" normalizes them to show percentage distribution.
type: "default" | "expanded" | "stacked"
default: "default"
The visual style for dots at data points on the area lines.
type: "default" | "border" | "colored-border"
The visual style for the active/hovered dot at data points.
type: "default" | "border" | "colored-border"
The visual style variant for the legend indicators.
type: "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"
Whether to connect line segments when there are null values in the data.
type: boolean
default: false
Minimum gap in pixels between axis ticks.
type: number
default: 8
Whether to hide the tooltip on hover.
type: boolean
default: false
Controls the border-radius of the tooltip.
type: "sm" | "md" | "lg" | "xl"
default: "lg"
Controls the visual style of the tooltip.
type: "default" | "frosted-glass"
default: "default"
When set, the tooltip will be visible by default at the specified data point index.
type: number
Whether to hide the background grid lines.
type: boolean
default: false
Background pattern variant to display behind the chart. When set, the Cartesian grid is automatically hidden.
type: BackgroundVariant
Whether to hide the chart legend.
type: boolean
default: false
Whether to hide the vertical cursor line that appears on hover.
type: boolean
default: false
Enables interactive clicking on areas to select/deselect them. When an area is selected, unselected areas become semi-transparent.
type: boolean
default: false
The data key that should be selected by default when isClickable is enabled.
type: string | null
default: null
Callback function that is called when a chart area is selected or deselected. Receives the selected data key as a parameter, or null when deselected.
Note: This prop is only available when isClickable is set to true.
type: (selectedDataKey: string | null) => void
Shows a loading skeleton animation with shimmer effect when data is being fetched.
type: boolean
default: false
Number of data points to display in the loading skeleton.
type: number
default: 14
When enabled, displays a brush control below the chart for selecting and zooming into a range of data.
type: boolean
default: false
The height of the brush preview area in pixels.
type: number
Custom formatter for the brush axis labels.
type: (value: unknown, index: number) => string
Callback invoked when the user changes the brush selection range.
type: (range: EvilBrushRange) => void
Additional props to pass to the underlying Recharts AreaChart component.
type: ComponentProps<typeof AreaChart>
Read the Recharts AreaChart documentation for available props.
Additional props to pass to the Recharts XAxis component.
type: ComponentProps<typeof XAxis>
Read the Recharts XAxis documentation for available props.
Additional props to pass to the Recharts YAxis component.
type: ComponentProps<typeof YAxis>
Read the Recharts YAxis documentation for available props.