Installation
Usage
import { EvilBarChart } from "@/components/evilcharts/charts/bar-chart";<EvilBarChart
xDataKey="month"
barVariant="default"
stackType="default"
data={data}
chartConfig={chartConfig}
/>Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilBarChart
data={data}
chartConfig={chartConfig}
isClickable={true}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
/>Loading State
The bar chart supports loading state with a shimmer animation. You can pass the isLoading prop to the chart to show the loading state while your data is being fetched.
Buffer Bar
When enableBufferBar is enabled, the last data point's bars are rendered with a diagonal lines (hatched) pattern while the rest stay solid. This is useful for indicating projected, estimated, or incomplete data at the end of a series — commonly seen in financial charts and forecasting dashboards.
Examples
Below are some examples of the bar chart with different variants. You can customize the barVariant, stackType, and other properties.
Hover Highlight
The hover highlight feature dims other bars when you hover over a bar, making it easier to focus on specific data points. Use the enableHoverHighlight prop to enable this feature.
Gradient Colors
Bar Variants
Stack Types
Horizontal Layout
Use layout="horizontal" to display bars horizontally. In horizontal mode, the Y-axis shows categories while the X-axis shows values. Use yAxisProps for category formatting.
Glowing Bars
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 visual style variant for the bars.
type: "default" | "hatched" | "duotone" | "duotone-reverse" | "gradient" | "stripped"
default: "default"
Controls how multiple bars are stacked. "default" renders bars side by side, "stacked" stacks them on top of each other, and "percent" shows percentage distribution.
type: "default" | "stacked" | "percent"
default: "default"
The orientation of the bars. "vertical" displays bars vertically (default), "horizontal" displays bars horizontally.
type: "vertical" | "horizontal"
default: "vertical"
The border radius of the bars in pixels.
type: number
default: 2
The gap between bars in the same category (when using multiple series).
type: number
The gap between different categories of bars.
type: number
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
The visual style variant for the legend indicators.
type: "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"
Whether to hide the chart legend.
type: boolean
default: false
Enables interactive clicking on bars to select/deselect them. When a bar is selected, unselected bars 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 bar 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
When enabled, hovering over a bar dims all other bars, making it easier to focus on specific data points.
type: boolean
default: false
Shows a loading skeleton animation with shimmer effect when data is being fetched.
type: boolean
default: false
Number of bars to display in the loading skeleton.
type: number
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
When enabled, renders the last data point's bars with a diagonal lines (hatched) pattern while the rest stay solid. Useful for indicating projected or incomplete data at the end of a series.
type: boolean
default: false
Array of data keys that should have a glowing effect applied. Creates a smooth outer glow around the specified bars.
type: NumericDataKeys<TData>[] (array of keys where the value is a number)
default: []
Additional props to pass to the underlying Recharts BarChart component.
type: ComponentProps<typeof BarChart>
Read the Recharts BarChart 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.