Scatter Chart

Some examples of how to use the ScatterChart component

Simple

import { CustomTooltip } from "@tailus-ui/visualizations";
import { ResponsiveContainer, ScatterChart, Scatter, Tooltip, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

export const ScatterOverview = () => {
    return (
        <div className="h-72 max-w-xl w-full" data-shade="900">
            <ResponsiveContainer width="100%" height="100%">
                <ScatterChart data={data}>

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <CustomTooltip payload={[]} active fancy label={""}/>
                        }
                    />

                    <CartesianGrid
                        className={cartesianGrid()}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Scatter className={area({ gradient:true, intent: "secondary" })} fill="currentColor" dataKey="Primary" line />
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    )
}

With Line

import { CustomTooltip } from "@tailus-ui/visualizations";
import { ResponsiveContainer, ScatterChart, Scatter, Tooltip, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

export const ScatterOverview = () => {
    return (
        <div className="h-72 max-w-xl w-full" data-shade="900">
            <ResponsiveContainer width="100%" height="100%">
                <ScatterChart data={data}>

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <CustomTooltip payload={[]} active fancy label={""}/>
                        }
                    />

                    <CartesianGrid
                        className={cartesianGrid()}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Scatter className={area({ gradient:true, intent: "secondary" })} fill="currentColor" dataKey="Primary" />
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    )
}

Two Y-Axis

import { CustomTooltip } from "@tailus-ui/visualizations";
import { ResponsiveContainer, ScatterChart, Scatter, Tooltip, XAxis, YAxis, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data01 = [];
const data02 = [];

export const ScatterOverview = () => {
    return (
        <div className="h-72 max-w-xl w-full" data-shade="900">
            <ResponsiveContainer width="100%" height="100%">
                <ScatterChart>

                    <XAxis
                        className="text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        type="number"
                        dataKey="x"
                        name="stature"
                        unit="cm"
                        stroke="currentColor"
                    />

                    <YAxis
                        className={area({ intent: "gray" })}
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        yAxisId="left"
                        type="number"
                        dataKey="y"
                        name="weight"
                        unit="kg"
                        stroke="currentColor"
                    />

                    <YAxis
                        className={area({intent: "secondary" })}
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        yAxisId="right"
                        type="number"
                        dataKey="y"
                        name="weight"
                        unit="kg"
                        orientation="right"
                        stroke="currentColor"
                    />

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <CustomTooltip payload={[]} active fancy label={""}/>
                        }
                    />

                    <CartesianGrid
                        className={cartesianGrid()}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Scatter
                        className={area({ gradient: true, intent: "gray", class:"dark:text-gray-400" })}
                        fill="currentColor"
                        yAxisId="left"
                        name="A school"
                        data={data01}
                    />

                    <Scatter
                        className={area({ gradient: true, intent: "secondary" })}
                        fill="currentColor"
                        yAxisId="right"
                        name="B school"
                        data={data02}
                    />
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    )
}