1 Basic Line Chart

Name: 1 Basic Line Chart
Author: vamseeachanta

ASecurity

Sub-skill of chartjs: 1. Basic Line Chart (+2).

17 stars

0 votes

0 copies

0 views

Added 9/9/2026

datajavascriptgojava

Security Analysis

A100/100

Scanned 9/9/2026

Install to Claude Code

$npx -y skills add vamseeachanta/workspace-hub --skill 1-basic-line-chart --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 1 Basic Line Chart?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for 1 Basic Line Chart

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/vamseeachanta-1-basic-line-chart/badge)](https://www.skillsdirectory.com/skills/vamseeachanta-1-basic-line-chart)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

SKILL.md

---
name: chartjs-1-basic-line-chart
description: 'Sub-skill of chartjs: 1. Basic Line Chart (+2).'
version: 1.0.0
category: data-visualization
type: reference
scripts_exempt: true
---

# 1. Basic Line Chart (+2)

## 1. Basic Line Chart

```html
<!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: 'rgb(75, 192, 192)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          tension: 0.1
        }]
      },
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: 'Monthly Sales'
          }
        }
      }
    });
  </script>
</body>
</html>
```


## 2. Bar Chart

```javascript
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: {
      y: {
        beginAtZero: true
      }
    }
  }
});
```


## 3. Pie/Doughnut Chart

```javascript
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'
      }
    }
  }
});
```

Attribution

vamseeachanta

1 Basic Line Chart

Security Analysis

Attribution

Comments (0)