القائمة
Create simple, responsive charts quickly with Chart.js
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/vamseeachanta/workspace-hub --skill chartjsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
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.
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.
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.
استنادا إلى تصنيف SOC المهني
| 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"] |
Create beautiful, responsive charts in minutes with Chart.js - the simple yet flexible JavaScript charting library.
Use Chart.js when you need:
Avoid when:
<!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: ,
: ,
:
}]
},
: {
: ,
: {
: {
: ,
:
}
}
}
});
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: {
: {
:
}
}
}
});
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'
}
}
}
});
<!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', ],
: [
{
: ,
: [, , , ],
: ,
: ,
:
},
{
: ,
: [, , , ],
: ,
: ,
:
},
{
: ,
: [, , , ],
: ,
: ,
:
}
]
},
: {
: ,
: ,
: {
: ,
: ,
},
: {
: {
: ,
:
},
: {
: ,
:
}
},
: {
: {
: ,
: {
: ,
:
}
},
: {
: {
: ,
:
}
}
}
}
});
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: {
: ,
:
}
},
: {
: {
: ,
:
}
}
}
});
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: {
: ,
:
}
},
: {
: {
: ,
:
}
}
}
});
// 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:
}]
},
: {
:
}
});
});
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.();
}, );
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'
}
}
}
});
<div style="position: relative; height: 400px; width: 100%;">
<canvas id="myChart"></canvas>
</div>
options: {
responsive: true,
maintainAspectRatio: false
}
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
});
}
// 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
}
}
}
});
options: {
// Disable animations for large datasets
animation: {
duration: 0
},
// Use decimation for large datasets
parsing: false,
normalized: true
}
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)'
];
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += '$' + context.parsed.y.toFixed(2);
return label;
}
}
}
}
}
options: {
plugins: {
legend: {
position: 'bottom',
labels: {
font: {
size: 14
},
usePointStyle: true
}
}
}
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
npm install chart.js
import Chart from 'chart.js/auto';
<script type="module">
import Chart from 'https://cdn.jsdelivr.net/npm/chart.js@4/+esm';
const ctx = document.getElementById('myChart');
new Chart(ctx, {...});
</script>
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'
}
}
}
}
npm install chartjs-plugin-annotation
npm install chartjs-plugin-datalabels
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} />;
}
<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>
Use this skill for quick, simple charts that look great with minimal configuration!