Charts

The admin-boil dashboard includes beautifully designed, interactive charts to help you visualize your data effectively. Whether you're tracking user activity, sales performance, or custom metrics, our charts offer the flexibility and clarity you need.

Key Features

📈 Multiple Chart Types

• Choose from a variety of chart types including line charts, bar charts, pie charts, and area charts.
• Each chart type is designed for specific use cases to help you represent data visually in the most effective way.

🎨 Customizable Design

• Fully customize the appearance of charts with adjustable colors, labels, and gridlines.
• Tailor the charts to match your brand and design preferences seamlessly.

📊 Real-Time Data Sync

• Charts are connected to real-time data sources, providing up-to-date insights without manual refresh.
• Perfect for tracking live metrics such as website traffic and sales data.

🧩 Built with shadcn UI

• The charts are designed using shadcn UI, ensuring modern design standards with smooth animations and a minimalist look.
• Compatible with your existing Tailwind CSS setup.

⚙️ Easy Integration

• Plug-and-play setup allows you to start visualizing data with minimal configuration.
• Just import the chart components and connect them to your data sources.

Usage Example

import { LineChart } from 'admin-boil/charts'
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 150 },
  { label: 'March', value: 180 }
]
 
export default function Dashboard() {
  return (
    <div className="p-8">
      <h2 className="text-2xl font-bold mb-4">
        Monthly Sales Overview
      </h2>
      <LineChart data={data} />
    </div>
  )
}

Best Practices for Using Charts

• Keep It Simple: Use only essential data points to avoid overwhelming your users.
• Use Proper Chart Types: Choose the chart that best fits your data visualization needs (e.g., line charts for trends, pie charts for distributions).
• Consistent Styling: Maintain a consistent design throughout your dashboard for a cohesive experience.