Installation
Usage
import { EvilLineChart } from "@/components/evilcharts/charts/line-chart";<EvilLineChart
xDataKey=""
curveType="monotone"
strokeVariant="solid"
activeDotVariant="default"
data={data}
chartConfig={chartConfig}
/>Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilLineChart
data={data}
chartConfig={chartConfig}
isClickable={true}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
/>Loading State
The line 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.
Buffer Line
When enableBufferLine is enabled, the last segment of each line is rendered as a dashed/dotted pattern while the rest of the line stays 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 line chart with different variants. where you can change the curveType & strokeVariant.
Gradient Colors
Curve Types
Stroke Variants
Glowing Lines
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 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.
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 lines to select/deselect them. When a line is selected, unselected lines 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 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 data points to display in the loading skeleton.
type: number
default: 14
When enabled, renders the last segment of each line as a dashed pattern while the rest stays solid. Useful for indicating projected or incomplete data at the end of a series.
type: boolean
default: false
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
Array of data keys that should have a glowing effect applied. Creates a smooth outer glow around the specified lines.
type: NumericDataKeys<TData>[] (array of keys where the value is a number)
default: []
Additional props to pass to the underlying Recharts LineChart component.
type: ComponentProps<typeof LineChart>
Read the Recharts LineChart 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.