Data Visualization

Installation

Tailus UI uses Recharts for data visualization components. Install Recharts by running the following command:

npm install recharts

Make sure to have themer v0.1.7 or later to be able to use --dv- variables

npm install @tailus/themer@latest

Download and place visualization components in tailus-ui/visualizations folder or install each component individually.

📂 tailus-ui
   📂 visualizations
       📄 index.ts
       📄 data.ts
       📄 Patterns.tsx
       📄 Legend.tsx
       📄 Tooltip.tsx

   // ... your other components

Usage

We provide --dv- CSS variables for styling Recharts through the components plugin.

The available variables are :

• --dv-primary
• --dv-secondary
• --dv-accent
• --dv-info
• --dv-danger
• --dv-success
• --dv-warning
• --dv-gray
• --dv-neutral

To use --dv- variables with color shades such as --dv-primary-400, import the visualizations plugin in your Tailwind config file and add it to the plugins array.

import { visualizations } from "@tailus/themer" 

module.exports = {
    content: [],
    theme: {
        extend: {},
    }
    plugins:[
        // other plugins
        visualizations
    ]
};

Read each component’s documentation to learn how to use them in your application.