Linear Gradient

Use linear gradients to style your aria charts

Installation

Copy-paste the component code in a file named LinearGradient.tsx in your tailus-ui/visualizations folder.

import React from 'react';
import { gradientStop, type AreaProps as AreaVariants } from "@tailus/themer"

export const LinearGradient: React.FC<Omit<AreaVariants, "gradient"> & {id:string}> = ({intent, id}) => {
    return (
        <linearGradient x1={0} y1={0} x2={0} y2={1} id={id}>
            <stop className={gradientStop({intent})} offset="5%" stopColor="currentColor" stopOpacity={0.8} />
            <stop className="text-white dark:text-gray-950" offset="95%" stopColor="currentColor" stopOpacity={0} />
        </linearGradient>
    )
}

Usage

Import the <LinearGradient /> component from your local files and use it inside the <defs> tag in your AreaChart component.

import { LinearGradient } from '@tailus-ui/visualizations';
<defs>
    <LinearGradient intent="gray" id="Gray" />
    <LinearGradient intent="accent" id="Accent" />
    <LinearGradient intent="primary" id="Primary" />
</defs>

Assign a unique identifier to the <LinearGradient /> component using the id prop, for example id="Gray". Then, use this id as the value for the fill prop of the <Area /> component in your AreaChart, like so: fill="url(#Gray)". This links the gradient with the id="Gray" to the area it should be applied to.

<Area stroke="currentColor" fill="url(#Gray)" dataKey="Gray" />

Reference

The LinearGradient component has the following props

Prop
Type
Default
intent
enum
primary
id*
string