chartjs

Create simple, responsive charts quickly with Chart.js

跳到安装

仓库: vamseeachanta/workspace-hub
最近来源活动: 2026年2月25日 02:15
检测到的 SKILL.md 语言: 英语
星标: 16
分支: 7

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/vamseeachanta/workspace-hub --skill chartjs

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

communication-voice

Write outbound email and external messages in Vamsee Achanta's voice — a subtle offer to help, never bold or rash claims. Load before drafting ANY email, LinkedIn/Collide reply, proposal note, or outreach sent under his name.

2026-07-30

hf-dataset-publishing

Save/publish analysis or computation results from ANY ecosystem repo to Hugging Face as a queryable, viewer-renderable dataset. Use when the user wants to "save results to hugging face", "publish dataset to HF", "hugging face data saving", "save analysis results", "hf dataset", "make results queryable", or "render via datasets-server API". Reshapes nested results into flat parquet tables, writes a dataset card with a viewer `configs:` block and provenance, applies license/public-vs-private routing, enforces a domain data-quality gate (faithful-to-source != correct), publishes to `aceengineer/<repo>-<projection>`, and verifies via the datasets-server API.

2026-07-28

github-repo-management

Clone, create, fork, configure, and manage GitHub repositories. Manage remotes, secrets, releases, and workflows. Works with gh CLI or falls back to git + GitHub REST API via curl.

2026-07-23

查看这个仓库的全部 Skills

name	chartjs
version	1.0.0
description	Create simple, responsive charts quickly with Chart.js
author	workspace-hub
category	data-visualization
tags	["charts","chartjs","simple","quick","responsive","canvas"]
platforms	["web","javascript"]

Chart.js Quick Charting Skill

Create beautiful, responsive charts in minutes with Chart.js - the simple yet flexible JavaScript charting library.

When to Use This Skill

Use Chart.js when you need:

Quick implementation - Up and running in minutes
Simple charts - Line, bar, pie, doughnut, radar charts
Minimal configuration - Sensible defaults that work out of the box
Small projects - Lightweight library (60KB gzipped)
Responsive charts - Mobile-friendly by default
No dependencies - Standalone library

Avoid when:

Complex customization needed (use D3.js)
3D charts required (use Plotly)
Advanced scientific visualizations needed (use Plotly)
Large datasets >10k points (use Plotly with WebGL)

Core Capabilities

1. Basic Line Chart

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Sales 2024',
          data: [12, 19, 3, 5, 2, 3],
          borderColor: ,
          : ,
          : 
        }]
      },
      : {
        : ,
        : {
          : {
            : ,
            : 
          }
        }
      }
    });

2. Bar Chart

const ctx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      : {
        : 
      }
    }
  }
});

3. Pie/Doughnut Chart

const ctx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(ctx, {
  type: 'pie', // or 'doughnut'
  data: {
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [{
      label: 'Device Usage',
      data: [55, 35, 10],
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)'
      ],
      hoverOffset: 4
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Device Usage Statistics'
      }
    }
  }
});

Complete Examples

Example 1: Multi-Dataset Line Chart

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    .chart-container {
      position: relative;
      height: 400px;
      width: 80%;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <canvas id="multiLineChart"></canvas>
  </div>
  <script>
    const ctx = document.getElementById('multiLineChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Week 1', 'Week 2', 'Week 3', ],
        : [
          {
            : ,
            : [, , , ],
            : ,
            : ,
            : 
          },
          {
            : ,
            : [, , , ],
            : ,
            : ,
            : 
          },
          {
            : ,
            : [, , , ],
            : ,
            : ,
            : 
          }
        ]
      },
      : {
        : ,
        : ,
        : {
          : ,
          : ,
        },
        : {
          : {
            : ,
            : 
          },
          : {
            : ,
            : 
          }
        },
        : {
          : {
            : ,
            : {
              : ,
              : 
            }
          },
          : {
            : {
              : ,
              : 
            }
          }
        }
      }
    });

Example 2: Stacked Bar Chart

const ctx = document.getElementById('stackedBar').getContext('2d');
const stackedChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: 'Revenue',
        data: [100, 120, 115, 134],
        backgroundColor: 'rgba(75, 192, 192, 0.7)',
      },
      {
        label: 'Costs',
        data: [60, 70, 65, 80],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
      },
      {
        label: 'Profit',
        data: [40, 50, 50, 54],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        : ,
        : 
      }
    },
    : {
      : {
        : ,
        : 
      }
    }
  }
});

Example 3: Radar Chart

const ctx = document.getElementById('radarChart').getContext('2d');
const radarChart = new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'],
    datasets: [
      {
        label: 'Vehicle A',
        data: [85, 90, 70, 95, 80],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)',
      },
      {
        label: 'Vehicle B',
        data: [75, 85, 90, 85, 90],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        pointBackgroundColor: 'rgb(54, 162, 235)',
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      r: {
        : ,
        : 
      }
    },
    : {
      : {
        : ,
        : 
      }
    }
  }
});

Example 4: Loading Data from CSV

// Using Fetch API to load CSV
fetch('../data/sales.csv')
  .then(response => response.text())
  .then(csvText => {
    const lines = csvText.split('\n');
    const headers = lines[0].split(',');

    const labels = [];
    const data = [];

    for (let i = 1; i < lines.length; i++) {
      const values = lines[i].split(',');
      labels.push(values[0]);
      data.push(parseFloat(values[1]));
    }

    const ctx = document.getElementById('csvChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'Sales Data',
          data: data,
          borderColor: 'rgb(75, 192, 192)',
          tension: 
        }]
      },
      : {
        : 
      }
    });
  });

Example 5: Real-Time Updating Chart

const ctx = document.getElementById('realtimeChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'Real-time Data',
      data: [],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        display: true
      },
      y: {
        beginAtZero: true
      }
    },
    animation: {
      duration: 0 // Disable animation for real-time
    }
  }
});

// Update every second
let dataPoint = 0;
setInterval(() => {
  const now = new Date();
  const timeLabel = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();

  chart.data.labels.(timeLabel);
  chart..[]..(.() * );

  
   (chart... > ) {
    chart...();
    chart..[]..();
  }

  chart.();
}, );

Example 6: Mixed Chart Types

const ctx = document.getElementById('mixedChart').getContext('2d');
const mixedChart = new Chart(ctx, {
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        type: 'bar',
        label: 'Sales',
        data: [50, 60, 70, 80, 90],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
      },
      {
        type: 'line',
        label: 'Target',
        data: [55, 65, 75, 85, 95],
        borderColor: 'rgb(255, 99, 132)',
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Sales vs Target'
      }
    }
  }
});

Best Practices

1. Use Responsive Containers

<div style="position: relative; height: 400px; width: 100%;">
  <canvas id="myChart"></canvas>
</div>

options: {
  responsive: true,
  maintainAspectRatio: false
}

2. Destroy Charts Before Recreating

let myChart;

function createChart(data) {
  // Destroy existing chart
  if (myChart) {
    myChart.destroy();
  }

  const ctx = document.getElementById('myChart').getContext('2d');
  myChart = new Chart(ctx, {
    type: 'line',
    data: data
  });
}

3. Use Plugins for Extended Functionality

// Example: Chart.js Data Labels Plugin
import ChartDataLabels from 'chartjs-plugin-datalabels';

const chart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  data: {...},
  options: {
    plugins: {
      datalabels: {
        color: '#fff',
        display: true
      }
    }
  }
});

4. Optimize for Performance

options: {
  // Disable animations for large datasets
  animation: {
    duration: 0
  },
  // Use decimation for large datasets
  parsing: false,
  normalized: true
}

Available Chart Types

Line - Trend analysis, time series
Bar - Comparisons, categorical data
Pie - Proportions, percentages
Doughnut - Like pie, with center hole
Radar - Multivariate data
Polar Area - Similar to pie with variable radii
Bubble - 3-dimensional data (x, y, size)
Scatter - Correlation analysis

Common Customizations

Custom Colors

const colors = [
  'rgba(255, 99, 132, 0.7)',
  'rgba(54, 162, 235, 0.7)',
  'rgba(255, 206, 86, 0.7)',
  'rgba(75, 192, 192, 0.7)',
  'rgba(153, 102, 255, 0.7)'
];

Custom Tooltips

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          let label = context.dataset.label || '';
          if (label) {
            label += ': ';
          }
          label += '$' + context.parsed.y.toFixed(2);
          return label;
        }
      }
    }
  }
}

Custom Legends

options: {
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        font: {
          size: 14
        },
        usePointStyle: true
      }
    }
  }
}

Installation

CDN (Quick Start)

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

NPM

npm install chart.js

import Chart from 'chart.js/auto';

ES Modules

<script type="module">
  import Chart from 'https://cdn.jsdelivr.net/npm/chart.js@4/+esm';

  const ctx = document.getElementById('myChart');
  new Chart(ctx, {...});
</script>

Popular Plugins

Chart.js Zoom Plugin

npm install chartjs-plugin-zoom

import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

options: {
  plugins: {
    zoom: {
      zoom: {
        wheel: { enabled: true },
        pinch: { enabled: true },
        mode: 'xy'
      }
    }
  }
}

Chart.js Annotation Plugin

npm install chartjs-plugin-annotation

Chart.js Data Labels

npm install chartjs-plugin-datalabels

Integration Examples

With React

import { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

function ChartComponent({ data }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    if (chartInstance.current) {
      chartInstance.current.destroy();
    }

    const ctx = chartRef.current.getContext('2d');
    chartInstance.current = new Chart(ctx, {
      type: 'line',
      data: data,
      options: { responsive: true }
    });

    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, [data]);

  return <canvas ref={chartRef} />;
}

With Vue

<template>
  <canvas ref="chartCanvas"></canvas>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  props: ['chartData'],
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: this.chartData,
        options: { responsive: true }
      });
    }
  }
};
</script>

Resources

Official Docs: https://www.chartjs.org/docs/latest/
Samples: https://www.chartjs.org/docs/latest/samples/
GitHub: https://github.com/chartjs/Chart.js
Community: https://github.com/chartjs/awesome

Performance Tips

Disable animations for large datasets
Use decimation to reduce data points
Limit updates - batch chart updates
Destroy unused charts - free memory
Use canvas size wisely - larger canvas = slower rendering

Use this skill for quick, simple charts that look great with minimal configuration!

chartjs

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Chart.js Quick Charting Skill

When to Use This Skill

Core Capabilities

1. Basic Line Chart

2. Bar Chart

3. Pie/Doughnut Chart

Complete Examples

Example 1: Multi-Dataset Line Chart

Example 2: Stacked Bar Chart

Example 3: Radar Chart

Example 4: Loading Data from CSV

Example 5: Real-Time Updating Chart

Example 6: Mixed Chart Types

Best Practices

1. Use Responsive Containers

2. Destroy Charts Before Recreating

3. Use Plugins for Extended Functionality

4. Optimize for Performance

Available Chart Types

Common Customizations

Custom Colors

Custom Tooltips

Custom Legends

Installation

CDN (Quick Start)

NPM

ES Modules

Popular Plugins

Chart.js Zoom Plugin

Chart.js Annotation Plugin

Chart.js Data Labels

Integration Examples

With React

With Vue

Resources

Performance Tips

Chart.js Quick Charting Skill

When to Use This Skill

Core Capabilities

1. Basic Line Chart

2. Bar Chart

3. Pie/Doughnut Chart

Complete Examples

Example 1: Multi-Dataset Line Chart

Example 2: Stacked Bar Chart

Example 3: Radar Chart

Example 4: Loading Data from CSV

Example 5: Real-Time Updating Chart

Example 6: Mixed Chart Types

Best Practices

1. Use Responsive Containers

2. Destroy Charts Before Recreating

3. Use Plugins for Extended Functionality

4. Optimize for Performance

Available Chart Types

Common Customizations

Custom Colors

Custom Tooltips

Custom Legends

Installation

CDN (Quick Start)

NPM

ES Modules

Popular Plugins

Chart.js Zoom Plugin

Chart.js Annotation Plugin

Chart.js Data Labels

Integration Examples

With React

With Vue

Resources

Performance Tips