Data Visualization Engine

Data Visualization Engine

Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.

Decision Framework

When to Apply

Use when: Dashboards, reports, analytics views, data exploration interfaces

When NOT to Apply

Don't use when: Simple data tables, single number displays

Anti-Patterns

1. Misleading Charts

// BAD: Truncated Y-axis exaggerates differences
options: { scales: { y: { min: 95, max: 100 } } }

// GOOD: Zero-based Y-axis
options: { scales: { y: { beginAtZero: true } } }

2. 3D Charts

3D charts distort data perception. Always prefer 2D.

3. No Legends

Charts without legends are meaningless when multiple series exist.

Trigger Phrases

• "Create chart"
• "Data visualization"
• "Graph component"
• "Dashboard charts"
• "Interactive visualization"

Patterns

Responsive Chart Component

const ChartContainer = ({ type, data, options }) => {
  const containerRef = useRef(null);
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new Chart(containerRef.current, {
      type, data,
      options: { responsive: true, maintainAspectRatio: false, ...options }
    });
    return () => chartRef.current?.destroy();
  }, [type, data, options]);

  return <div style={{ position: 'relative', height: '400px' }}>
    <canvas ref={containerRef} />
  </div>;
};

Integration

• Works with: dashboard-composition-engine, performance-budget-enforcer