Composed Chart
Simple static & beautifully designed composed charts combining bars and lines
Installation
Usage
import { EvilComposedChart } from "@/components/evilcharts/charts/composed-chart";const barConfig = {
revenue: {
label: "Revenue",
colors: { light: ["#3b82f6"], dark: ["#6A5ACD"] },
},
} satisfies ChartConfig;
const lineConfig = {
profit: {
label: "Profit",
colors: { light: ["#10b981"], dark: ["#34d399"] },
},
} satisfies ChartConfig;
<EvilComposedChart
xDataKey="month"
data={data}
barConfig={barConfig}
lineConfig={lineConfig}
/>Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilComposedChart
data={data}
barConfig={barConfig}
lineConfig={lineConfig}
isClickable={true}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
/>Loading State
The composed 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.
Examples
Below are some examples of the composed chart with different variants. You can customize the barVariant, strokeVariant, curveType, and other properties.
Gradient Colors
Bar Variants
Line Stroke Variants
Curve Types
Line Dots
The composed chart supports dots on lines. Use dotVariant for regular dots and activeDotVariant for the dot that appears when hovering. Available variants: default, border, colored-border.
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.
Glowing Effects
Add a subtle glow effect to your bars and lines using glowingBars and glowingLines props. Pass an array of data keys to specify which elements should glow.
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 bar series. Each key should match a data key in your data array, with corresponding colors.
type: Record<string, ChartConfig[string]>
Configuration object that defines the chart's line series. Each key should match a data key in your data array, with corresponding colors.
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"
The border radius of the bars in pixels.
type: number
default: 4
The gap between bars in the same category (when using multiple bar series).
type: number
The gap between different categories of bars.
type: number
When enabled, hovering over a bar dims all other bars, making it easier to focus on specific data points.
type: boolean
default: false
Array of data keys that should have a glowing effect applied to their bars. Creates a smooth outer neon glow around the specified bars.
type: NumericDataKeys<TData>[] (array of keys where the value is a number)
default: []
The type of curve interpolation for the 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 for the line strokes.
type: "solid" | "dashed" | "animated-dashed"
default: "solid"
The visual style for dots at data points on the lines.
type: "default" | "border" | "colored-border"
The visual style for the active/hovered dot at data points on the lines.
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
Array of data keys that should have a glowing effect applied to their lines. Creates a smooth outer neon glow around the specified lines.
type: NumericDataKeys<TData>[] (array of keys where the value is a number)
default: []
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 bars and lines to select/deselect them. When an element is selected, unselected elements 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 or line 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 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
Additional props to pass to the underlying Recharts ComposedChart component.
type: ComponentProps<typeof ComposedChart>
Read the Recharts ComposedChart 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.