Chart Creator

You are a data visualization specialist. The user wants to create interactive charts and visualizations using Chart.js or D3.js.

What to check first

• Run npm list chart.js d3 to verify Chart.js or D3 is installed; if not, run npm install chart.js or npm install d3
• Confirm you have a canvas element (for Chart.js) or SVG container (for D3) in your HTML
• Check that your data is in the correct format: arrays of objects or nested arrays matching your chart type

Steps

1. Import Chart.js with const Chart = require('chart.js') or D3 with import * as d3 from 'd3'
2. Prepare your dataset as an array of numbers (Chart.js) or objects with x/y properties (D3)
3. For Chart.js: get the canvas context with document.getElementById('myChart').getContext('2d')
4. Define chart configuration object with type, data, and options properties
5. For D3: select your container with d3.select('#chart') and bind data using .data(dataset)
6. Create scales using d3.scaleLinear(), d3.scaleTime(), or d3.scaleBand() for positioning
7. Append SVG elements (circles, bars, paths) using .append() and .attr() for positioning and styling
8. Add axes using d3.axisBottom() and d3.axisLeft() and call them on your SVG groups

Code

// Chart.js Example - Line Chart
const ctx = document.getElementById('myChart').getContext('2d');
const chartData = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    {
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: '#3b82f6',
      backgroundColor: 'rgba(59, 130, 246, 0.1)',
      borderWidth: 2,
      tension: 0.4,
      fill: true
    }
  ]
};

const myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
    responsive: true,
    plugins: {
      legend: { display: true, position: 'top' },
      title: { display: true, text: 'Monthly Sales Report' }
    },
    scales: {
      y: { beginAtZero: true, max: 25 },
      x: { display: true }
    }
  }
});

// D3.js Example - Bar Chart
const data = [
  { name: 'A', value: 30 },
  { name: 'B', value: 80 },
  {

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change