We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Feature request: Histogram

Hello all
do you have plans to include histogram feature in the Gantt chart?
Something like this one: http://www.bryntum.com/forum/download/file.php?id=3071
You have already Resources, so it would be nice to see them in histogram form.
Thank you.

3 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team April 10, 2015 07:07 AM UTC

Hi Franjkovic,

Thanks for using Syncfusion product.

We would like to inform you that we have already planned and logged a feature request regarding this.

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.


Please let us know if you require further assistance on this.


Mahalakshmi K.

ME Megatron February 7, 2019 03:04 AM UTC

Hello Mahalakshmi, I think this is a useful feature, and i saw your histogram has hours.

Can you please allow us to customize the histogram to show

  1. for e.g. which all tasks he is working on
  2. or custom (which skills he has)
  3. Also link it so the gantt task so when user select task it filters/highlights the resources for that task only.

JD Jayakumar Duraisamy Syncfusion Team February 8, 2019 08:24 AM UTC

Hi Megatron, 
Please find the response below: 
Query1: or custom (which skills he has) 
We have prepared the Gantt sample with histogram view. Using “queryTaskbarInfo client-side event we have customized the taskbar color, label color and label position. Using “args.taskbar” parameter we have append skills in the taskbar in histogram view.  
Please find the code example below: 
<script type="text/javascript"> 
function load() { 
            this.isProjectViewData = true; 
function resourceQueryTask(args) { 
            args.taskbarBackground = args.data.isOverAllocated ? "#0000FF" : "#3CB371"; 
            args.labelColor = "#FFFFFF"; 
            $(args.taskbar).find(".e-gantthistoworklabel").css("transform", "none"); 
            var rowIndex = $("#histoview").data("ejGantt").getGanttChartRows().index($(args.taskbar).closest('tr.e-ganttrowcell')), 
                resourceSkills = args.model.currentViewData[rowIndex].Skills, 
            resourceWork = $(args.taskbar).find(".e-gantthistoworklabel").text(); 
            $(args.taskbar).find(".e-gantthistoworklabel").text("Skills- " + resourceSkills + ", Work- " + resourceWork); 
Query2: Also link it so the gantt task so when user select task it filters/highlights the resources for that task only 
Using “rowSelected” client-side event we can populate histogram view with selected resources and data source. 
Please find the code example below: 
  function rowSelected(args) { 
            var resourceData = []; 
            for (var j = 0; j < args.model.dataSource.length; j++) { 
                if (args.data.item[args.model.taskIdMapping] == args.model.dataSource[j][args.model.taskIdMapping]) { 
            var ganttObj = $("#histoview").data("ejGantt"); 
            ganttObj.setModel({“dataSource": resourceData, "resources": args.data.resourceInfo }); 
We have also prepared the sample based on this. Please find the sample from below location 
Please let us know, if you need further assistance on this. 
Jayakumar D 

Live Chat Icon For mobile
Up arrow icon