The Complete Production SOP: How to Deploy and Run Chart.js Responsive Canvas Data Visualizations in Autonomous AI Agents

---
name: "chartjs-responsive-canvas-charts"
description: "Build responsive, interactive HTML5 canvas charts and graphs with Chart.js 4."
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { Chart, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Legend } from 'chart.js';

Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Legend);

import { Chart } from 'chart.js';

let metricsChartInstance: Chart | null = null;

export function renderMetricsChart(canvasEl: HTMLCanvasElement, labels: string[], values: number[]): Chart {
  if (metricsChartInstance) {
    metricsChartInstance.destroy();
  }

  metricsChartInstance = new Chart(canvasEl, {
    type: 'line',
    data: {
      labels,
      datasets: [{
        label: 'Latency (ms)',
        data: values,
        borderColor: '#3b82f6',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        fill: true,
        tension: 0.3
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        tooltip: {
          callbacks: {
            label: (context) => `Latency: ${context.parsed.y.toFixed(2)} ms`
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: { color: 'rgba(255, 255, 255, 0.05)' }
        }
      }
    }
  });

  return metricsChartInstance;
}

import { describe, it, expect, beforeEach } from 'vitest';
import { renderMetricsChart } from '../renderMetricsChart';

describe('renderMetricsChart', () => {
  let canvas: HTMLCanvasElement;
  beforeEach(() => {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
  });

  it('properly creates and re-instantiates without errors', () => {
    const chart1 = renderMetricsChart(canvas, ['A'], [10]);
    expect(chart1).toBeDefined();
    const chart2 = renderMetricsChart(canvas, ['B'], [20]);
    expect(chart2).toBeDefined();
  });
});