ability to specify custom class for tasks

index.html

@@ -15,6 +15,10 @@
 		.gantt-container {
 			overflow: scroll;
 		}
+		/* custom class */
+		.gantt .bar-milestone .bar-progress {
+			fill: tomato;
+		}
 	</style>
 	<script src="node_modules/moment/min/moment.min.js"></script>
 	<script src="node_modules/snapsvg/dist/snap.svg-min.js"></script>
@@ -56,6 +60,7 @@
 		tasks[2].dependencies = "Task 1"
 		tasks[3].dependencies = "Task 2"
 		tasks[5].dependencies = "Task 4"
+		tasks[5].custom_class = "bar-milestone";
 
 		var gantt_chart = Gantt("#gantt", tasks, {
 			on_click: function (task) {

src/Bar.js

@@ -37,7 +37,7 @@ export default function Bar(gt, task) {
 		self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step;
 		self.width = gt.config.column_width * self.duration;
 		self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0;
-		self.group = gt.canvas.group().addClass('bar-wrapper');
+		self.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
 		self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
 		self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
 	}

src/Gantt.js

@@ -3,7 +3,7 @@
  * Gantt:
  * 	element: querySelector string, required
  * 	tasks: array of tasks, required
- *   task: { id, name, start, end, progress, dependencies }
+ *   task: { id, name, start, end, progress, dependencies, custom_class }
  * 	config: configuration options, optional
  */
 import './gantt.scss';