> ## Documentation Index
> Fetch the complete documentation index at: https://quill.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# StaticChart

> Stateless Chart view of a Quill Report

Stateless chart component intended for use with [useDashboard](/docs/react/use-dashboard) and [useDashboardReport](/docs/react/use-dashboard-report).

```tsx App.tsx theme={null}
import {
  QuillProvider,
  useDashboard,
  useDashboardReport,
  StaticChart,
} from "@quillsql/react";
import { Card, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

function App() {
  return (
    <QuillProvider
      tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
      publicKey={process.env.QUILL_PUBLIC_KEY}
    >
      <CustomDashboard />
    </QuillProvider>
  );
}

function CustomDashboard() {
  const { sections, isLoading } = useDashboard("quill demo dashboard");

  return (
    <>
      <ChartsSection reports={sections["charts"]} />
    </>
  );
}

function ChartsSection({ reports }: { reports: any[] }) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-6 gap-6">
      {reports.map((report: any) => (
        <ChartCard reportId={report.id} name={report.name} />
      ))}
    </div>
  );
}

function ChartCard({ reportId, name }) {
  const { report, loading } = useDashboardReport(reportId);
  if (loading) {
    return (
      <div className="lg:col-span-1">
        <Card
          className="h-full shadow-none bg-transparent border-none"
          title={report.name}
        >
          <Skeleton />
        </Card>
      </div>
    );
  }
  return (
    <div className="lg:col-span-1">
      <Card
        className="h-full shadow-none bg-transparent border-none"
        title={report.name}
      >
        <StaticChart reportId={report.id} />
      </Card>
    </div>
  );
}
```

<ParamField body="reportId" type="string" required>
  The unique identifier of the report to display
</ParamField>

<ParamField body="onClickChartElement" type="(data: any) => void">
  Callback function triggered when a chart element is clicked
</ParamField>

<ParamField body="containerStyle" type="React.CSSProperties">
  Custom CSS styles to apply to the chart container
</ParamField>

<ParamField body="showLegend" type="boolean" default="false">
  Whether to display the chart legend
</ParamField>