Legend

Use the Custom Legend in your charts

Recharts

Installation

Copy-paste the legendText formatter code in a file named Legend.tsx in your tailus-ui/visualizations folder.

export const legendText = (value: string) => {
    return <span className="ml-1 mr-3 text-sm font-medium text-body">{value}</span>;
};

Usage

First, import the <Legend /> component from the recharts library and the legendText formatter from your local files. Then, assign legendText to the formatter prop of the <Legend /> component.

import { ResponsiveContainer, BarChart, Bar, Legend, CartesianGrid } from 'recharts';
import { legendText, data } from "@tailus-ui/visualizations";

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

                    <Legend verticalAlign="top" formatter={legendText} iconType="circle" iconSize={8} />

                    <CartesianGrid vertical={false} stroke="var(--ui-border-color)" />

                    <Bar fill="var(--dv-primary-900)" radius={4} dataKey="Primary" />
                    <Bar fill="var(--dv-primary-700)" radius={4} dataKey="Secondary" />
                    <Bar fill="var(--dv-primary-500)" radius={4} dataKey="Accent" />
                    <Bar fill="var(--dv-primary-300)" radius={4} dataKey="Gray" />
                </BarChart>
            </ResponsiveContainer>
        </div>
    );
};

Reference

Read more about the props and methods available for the Legend component in the Recharts documentation.

Examples

Radial Chart

 
import {CustomTooltip, legendText} from '@tailus-ui/visualizations';
import { RadialBarChart, RadialBar, ResponsiveContainer, PolarRadiusAxis, Legend, Tooltip } from 'recharts';

const data = [
    {
        name: 'Videos',
        uv: 31.47,
        pv: 1900,
        fill: 'var(--dv-primary-300)'
    },
    {
        name: 'Docs',
        uv: 31.47,
        pv: 1900,
        fill: 'var(--dv-primary-500)'
    },
    {
        name: 'Photos',
        uv: 26.69,
        pv: 1500,
        fill: 'var(--dv-primary-700)'
    },
    {
        name: 'Messages',
        uv: 15.69,
        pv: 1400,
        fill: 'var(--dv-primary-900)'
    }
];
export const Simple = () => {
    return (
        <div data-shade="925" className="mx-auto w-56">
            <ResponsiveContainer aspect={1 / 1}>
                <RadialBarChart innerRadius={20} outerRadius={120} barGap={0} data={data}>
                    <RadialBar label={{ position: 'insideStart', dataKey: 'name', fontSize: 11, fill: '#fff' }} background={{ fill: 'var(--ui-border-color)' }} cornerRadius={12} dataKey="pv" />
                    <Legend wrapperStyle={{ transform: 'translate(125%, 0)' }} align="right" verticalAlign="middle" layout="radial" iconSize={8} iconType="circle" formatter={legendText} />
                    <Tooltip key="pv" content={<CustomTooltip payload={[]} active mixed label="" />} cursor={{ stroke: 'var(--placeholder-text-color)', strokeWidth: 1 }} />
                </RadialBarChart>
            </ResponsiveContainer>
        </div>
    );
};