> For the complete documentation index, see [llms.txt](https://www.anandisheladiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.anandisheladiya.com/skills-and-experience/frontend/chartjs-d3.js-fabric-js.md).

# ChartJS / D3.JS / Fabric JS

### **Introduction**

Data visualization and canvas manipulation are crucial for creating interactive charts, graphs, and graphical elements in web applications. Three powerful JavaScript libraries used for these tasks are:

* **Chart.js** – A simple yet powerful charting library for creating various types of charts.
* **D3.js** – A data-driven library for complex, interactive visualizations.
* **Fabric.js** – A framework for manipulating HTML5 canvas elements with ease.

Each of these libraries serves a unique purpose, from simple charting to advanced data-driven graphics and interactive canvas applications.

### **1. Chart.js – Simple and Lightweight Charting Library**

**Chart.js** is a JavaScript library that makes it easy to create **interactive and visually appealing charts** using the HTML5 `<canvas>` element. It supports bar charts, line charts, pie charts, and more.

**Installation:**

```bash
npm install chart.js

```

Example: Creating a Line Chart

```html
<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById("myChart").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: {
      labels: ["January", "February", "March", "April"],
      datasets: [{
        label: "Sales",
        data: [30, 50, 70, 100],
        borderColor: "blue",
        borderWidth: 2,
        fill: false
      }]
    },
    options: {
      responsive: true
    }
  });
</script>
```

**Key Features of Chart.js:**

* Supports multiple chart types (bar, line, pie, radar, etc.).
* Provides **animations and tooltips**.
* Works with **responsive and interactive charts**.
* Uses the **HTML5 canvas** for rendering.

**Best for:** Dashboards, reports, and quick visualizations.

### **2. D3.js – Data-Driven Visualization Library**

**D3.js** (**Data-Driven Documents**) is a JavaScript library used for creating complex and **highly interactive data visualizations** using SVG, HTML, and CSS. It allows developers to bind data to elements and apply dynamic transformations.

**Installation:**

```bash
npm install d3
```

Example: Creating a Bar Chart

```html
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="500" height="300"></svg>

<script>
  const data = [10, 40, 30, 60, 90];
  
  const svg = d3.select("svg");
  const width = 500;
  const height = 300;
  const barWidth = width / data.length;

  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth)
    .attr("y", d => height - d * 3)
    .attr("width", barWidth - 5)
    .attr("height", d => d * 3)
    .attr("fill", "steelblue");
</script>

```

**Key Features of D3.js:**

* **Highly customizable** and **powerful** for complex visualizations.
* Uses **SVG, HTML, and CSS** to render charts.
* Supports **dynamic updates, animations, and transitions**.
* Enables **data-driven transformations** and interactions.

**Best for:** Interactive charts, dashboards, maps, and custom data visualizations.

### **3. Fabric.js – HTML5 Canvas Manipulation**

**Fabric.js** is a powerful JavaScript library for **working with HTML5 canvas**, making it easier to create and manipulate graphics, images, and interactive elements.

**Installation:**

```bash
npm install fabric

```

Example: Drawing a Simple Rectangle on Canvas

```html
<canvas id="canvas" width="400" height="300"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<script>
  const canvas = new fabric.Canvas("canvas");

  const rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 100,
    height: 100
  });

  canvas.add(rect);
</script>

```

**Key Features of Fabric.js:**

* Allows **easy manipulation of objects (scaling, rotating, dragging)**.
* Supports **image editing, filters, and text rendering**.
* Enables **grouping and layering** of elements on canvas.
* Can export drawings to **JSON and SVG** formats.

**Best for:** Image editing tools, interactive drawings, and game development.

### **Conclusion**

* **Use Chart.js** if you need **quick and simple charts** with minimal setup.
* **Use D3.js** if you want **powerful, interactive, and complex data visualizations**.
* **Use Fabric.js** if you need **advanced canvas manipulation and interactive drawings**.

These libraries make web applications **visually appealing and interactive**, each serving a unique purpose depending on your project needs.