Area Chart

Cards 88

About

Here is area chart multiple series medium size

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Area Chart to your project and fits it to your theme.

Code

How Area Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import DetailedStackedIncidentReportCard from '@/components/ui/area-chart-2'; // Adjust path as per your actual structure

function DetailedStackedIncidentReportCardDemoPage() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4 transition-colors duration-300">
      {/* 
        To enable dark mode for the demo page and component:
        1. Ensure Tailwind CSS is configured for dark mode (e.g., darkMode: 'class' in tailwind.config.js).
        2. Apply the 'dark' class to a parent element, typically <html> or <body>.
      */}
      <DetailedStackedIncidentReportCard />
    </div>
  );
}

export default DetailedStackedIncidentReportCardDemoPage;