# AngularJS Gantt Chart | DayPilot Pro for JavaScript Sandbox

> Read more about the [AngularJS Kanban board](https://doc.daypilot.org/kanban/angularjs/) plugin.

## Links

- Canonical HTML: /sandbox/kanban/angularjs.html
- Source HTML folder: /sandbox/kanban/
- Catalog root: /sandbox/
- Catalog: /sandbox/llms.txt

## Source

### Inline demo script 1

```javascript
var app = angular.module('main', ['daypilot']).controller('KanbanCtrl', function ($scope) {

            var config1 = {
                columns: [
                    {name: "Analysis", id: "1", barColor: "#f9ba25"},
                    {name: "Draft", id: "2"},
                    {name: "Testing", id: "3"}
                ],
                cards: [
                    {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
                    {
                        id: 2,
                        "name": "Task 2",
                        column: "1",
                        text: "This is a description of task #2.",
                        barColor: "#1155CC"
                    },
                    {id: 3, "name": "Task 3", column: "1", text: "This is a description of task #3.", barColor: "#999"},
                    {
                        id: 4,
                        "name": "Task 4",
                        column: "1",
                        text: "This is a description of task #4.",
                        barColor: "#6AA84F"
                    },
                    {
                        id: 5,
                        "name": "Task 5",
                        column: "2",
                        text: "This is a description of task #5.",
                        barColor: "#F6B26B"
                    },
                ]
            };

            var config2 = {
                columns: [
                    {name: "Analysis", id: "1", barColor: "#f9ba25"},
                    {name: "Draft", id: "2"},
                    {name: "Testing", id: "3"}
                ],
                cards: [
                    {id: "1", "name": "Task 1", column: "1", swimlane: "A", text: "This is a description of task #1."},
                    {
                        id: "2",
                        "name": "Task 2",
                        column: "1",
                        swimlane: "B",
                        text: "This is a description of task #2.",
                        barColor: "#6AA84F"
                    },
                    {
                        id: "3",
                        "name": "Task 3",
                        column: "1",
                        swimlane: "B",
                        text: "This is a description of task #3.",
                        barColor: "#F6B26B"
                    }
                ],
                swimlanes: [
                    {name: "Swimlane A", id: "A"},
                    {name: "Swimlane B", id: "B"}
                ]
            };

            $scope.config = config1;

            $scope.set1 = function () {
                $scope.config = config1;
            };

            $scope.set2 = function () {
                $scope.config = config2;
            };

        });
```