# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.anandisheladiya.com/skills-and-experience/frontend/chartjs-d3.js-fabric-js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.