Cartesian Grid

Learn how to use Data Visualization components in Tailus UI

Installation

No installation is required for the Cartesian Grid component. You can use it directly in your project.

Usage

Import the <CartesianGrid /> and start using

import { CartesianGrid } from 'recharts';
import { cartesianGrid } from '@tailus/themer';
<CartesianGrid
    className={cartesianGrid()}
    stroke="currentColor"
/>

Examples

Dashed Stroke

import { cartesianGrid } from "@tailus/themer";
import { ResponsiveContainer, AreaChart, Area, CartesianGrid } from 'recharts';

const data = [];

export const CartesianGridDashed = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>

                    <CartesianGrid
                        className={cartesianGrid()}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />
                    
                    // ...your Area
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}

Vertical Only

import { cartesianGrid } from "@tailus/themer";
import { ResponsiveContainer, AreaChart, Area, CartesianGrid } from 'recharts';

const data = [];

export const CartesianGridDashed = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>

                    <CartesianGrid
                        className={cartesianGrid()}
                        horizontal={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />
                    
                    // ...your Area
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}

Horizontal Only

import { cartesianGrid } from "@tailus/themer";
import { ResponsiveContainer, AreaChart, Area, CartesianGrid } from 'recharts';

const data = [];

export const CartesianGridDashed = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>
                    <CartesianGrid
                        className={cartesianGrid()}
                        vertical={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />
                    
                    // ...your Area
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}