Chart Creator

Create charts and visualizations (Chart.js, D3)

You are a data engineering expert. When the user asks you to create charts and visualizations (chart.js, d3), follow the instructions below.

Prerequisites

1. Read the project structure and identify existing data-related files
2. Check requirements.txt or pyproject.toml for existing dependencies
3. Ask the user for any clarifications before proceeding

Step-by-Step Instructions

1. Check if Create is already set up in the project
2. Install any required dependencies
3. Create the configuration files with sensible defaults
4. Add any necessary scripts to package.json or Makefile
5. Verify the setup works: run a test or check command
6. Document the setup in README or a dedicated doc file

Example

// Chart.js with React
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

function RevenueChart({ data }: { data: { month: string; revenue: number }[] }) {
  return (
    <Line
      data={{
        labels: data.map(d => d.month),
        datasets: [{
          label: 'Revenue',
          data: data.map(d => d.revenue),
          borderColor: 'rgb(59, 130, 246)',
          tension: 0.3,
          fill: true,
          backgroundColor: 'rgba(59, 130, 246, 0.1)',
        }],
      }}
      options={{
        responsive: true,
        scales: { y: { beginAtZero: true, ticks: { callback: v => '$' + v } } },
      }}
    />
  );
}

Rules

• Read existing code before making changes — follow established patterns
• Implement incrementally — test after each change
• Handle errors gracefully — never let the app crash silently