diff --git a/frontend/src/frameworks/components/layout/LeftPanel.tsx b/frontend/src/frameworks/components/layout/LeftPanel.tsx
index 59bac51..25bca02 100644
--- a/frontend/src/frameworks/components/layout/LeftPanel.tsx
+++ b/frontend/src/frameworks/components/layout/LeftPanel.tsx
@@ -22,6 +22,7 @@ import {
   type ChartTypeMeta,
 } from '@/domain/valueObjects/ChartType';
 import { type FieldType } from '@/domain/valueObjects/FieldType';
+import { useCreateChart } from '@/frameworks/hooks/useCreateChart';
 
 const FIELD_TYPE_ICON: Record<FieldType, React.ReactNode> = {
   number: <FieldNumberOutlined />,
@@ -165,6 +166,8 @@ function FieldsTab() {
 
 /** ChartsTab: chart type gallery grouped by category */
 function ChartsTab() {
+  const { handleCreate, loading } = useCreateChart();
+
   const grouped = useMemo(() => {
     const map: Record<string, ChartTypeMeta[]> = {};
     for (const meta of Object.values(CHART_TYPE_META)) {
@@ -200,8 +203,9 @@ function ChartsTab() {
                 key={meta.type}
                 size="small"
                 hoverable
-                style={{ textAlign: 'center', cursor: 'pointer' }}
+                style={{ textAlign: 'center', cursor: 'pointer', opacity: loading ? 0.5 : 1 }}
                 bodyStyle={{ padding: '8px 4px' }}
+                onClick={() => !loading && handleCreate(meta.type)}
               >
                 <BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />
                 <div style={{ fontSize: 11, lineHeight: 1.3 }}>{meta.label}</div>