Styling Labels | #z1n1bxtB | AnyChart Playground

HTMLcopy

 
<div id="container"></div>

CSScopy

 
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
  
       
  // create data
        var data = [
  {
    "name": "Renewal",
    "children": [
      {
        "name": "adamtestclient.com.au",
        "subType": "Domain Registration",
        "upfrontCost": 120,
        "ongoingCost": 0,
        "actualStart": "2021-09-07",
        "actualEnd": "2021-09-07"
      },
      {
        "name": "Dynamics GP",
        "subType": "Application",
        "upfrontCost": 30000,
        "ongoingCost": 0,
        "actualStart": "2021-10-28",
        "actualEnd": "2021-10-28"
      },
      {
        "name": "VMware Essentials Plus",
        "subType": "Licensing, Warranties and Renewals",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2021-10-28",
        "actualEnd": "2021-10-28"
      },
      {
        "name": "Test License #1",
        "subType": "Licensing, Warranties and Renewals",
        "upfrontCost": 2500,
        "ongoingCost": 0,
        "actualStart": "2021-12-21",
        "actualEnd": "2021-12-21"
      },
      {
        "name": "visitsdemodomain.net.au",
        "subType": "Domain Registration",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2022-02-07",
        "actualEnd": "2022-02-07"
      }
    ]
  },
  {
    "name": "Strategy",
    "children": [
      {
        "name": "Replacement of phone system with Teams Phone",
        "subType": "Modern Workplace",
        "upfrontCost": 5000,
        "ongoingCost": 5000,
        "actualStart": "2021-08-31",
        "actualEnd": "2021-08-31"
      },
      {
        "name": "Replace aging UPS",
        "subType": "Platforms",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2021-09-21",
        "actualEnd": "2021-09-21"
      },
      {
        "name": "Decommission legacy file services (on-premise and Datto Workplace)",
        "subType": "Business Solutions",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2021-10-11",
        "actualEnd": "2021-10-11"
      },
      {
        "name": "Upgrade Mebourne internet service",
        "subType": "Networks",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2021-12-09",
        "actualEnd": "2022-01-15"
      },
      {
        "name": "Implement new CRM",
        "subType": "Business Solutions",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2022-01-06",
        "actualEnd": "2022-01-06"
      },
      {
        "name": "Melbourne Office Relocation",
        "type": "Strategy",
        "subType": "Other",
        "upfrontCost": 0,
        "ongoingCost": 0,
        "actualStart": "2022-03-14",
        "actualEnd": "2022-03-14"
      }
    ]
  }
];
​
​
​
  // create a data tree
  var treeData = anychart.data.tree(data, "as-tree");    
  // create a chart
  var chart = anychart.ganttProject(); 
​
​
// access the timeline
var timeline = chart.getTimeline();
              // configure labels of tasks
timeline.milestones().labels().useHtml(true);
//timeline.milestones().labels().format(
  //"<span style='color:#295496;font-size:14px;font-family:Roboto'><b>{%name}</b></span><BR><span style='font-family:Roboto'><b>Upfront cost:</b> {%upfrontCost}<BR><b>Monthly cost:</b> {%ongoingCost}</span>"
//);
​
  
timeline.milestones().labels().format(  
  function() {
    
  var customfieldName = this.getData("name");
  var customfieldType = this.getData("type");  
  var customfieldSubType = this.getData("subType");
  var customfieldUpfrontCost = this.getData("upfrontCost");
  var customfieldOngoingCost = this.getData("ongoingCost");
    
    if (customfieldType == "Strategy") {
      return "<span style='color:#295496;font-size:12px;font-family:Roboto'>" + customfieldName + "</span><BR><span style='font-family:Roboto'><b>Upfront cost:</b> " + customfieldUpfrontCost + "<BR><b>Monthly cost:</b> " + customfieldOngoingCost + "</span>";
    } else {
      return "<span style='color:#962954;font-size:12px;font-family:Roboto'>" + customfieldName + "</span><BR><span style='font-family:Roboto'><b>Renewal cost:</b> " + customfieldUpfrontCost + "</span>";    
    }
    
  }
  
  );
      
  
timeline.milestones().fill("#a9bad5");
timeline.milestones().stroke("#fcfcfc");
​
timeline.milestones().markerType("circle");
​
  
chart.getTimeline().groupingTasks().enabled(false);
​
chart.getTimeline().scale().maximumGap(".5");
chart.getTimeline().scale().minimumGap(".1");
​
​
chart.dataGrid().column(0).enabled(false);
​
var column1 = chart.dataGrid().column(1);
  
column1.title().fontFamily("Roboto");  
column1.width(350);
column1.labels().useHtml(true);
column1.depthPaddingMultiplier(30);
​
​
//column1.labels().format("<span style='font-size:16px;font-family:Roboto'>{%name}</span><br><span style='font-family:Roboto'><b>{%subType}</b><br>{%detailedDescription}</span>");
  column1.labels().format(function() {
​
  var numChildren = this.item.numChildren();
  var duration = (this.actualEnd - this.actualStart) / 1000 / 3600 / 24;
  var progress = this.progress * 100 + "%";
  var customField = "";
  if (this.getData("custom_field")) {
    customField = "<span style='font-weight:bold'>" +
             this.getData("custom_field") + " </span>";
  }
  var customfieldType = this.getData("type"); 
  var customfieldSubType = this.getData("subType"); 
  var parentText = "<span style='font-size:16px;font-family:Roboto;font-weight:600;'>" + this.name + "</span>";
  
  if (customfieldType == "Strategy") { 
  var milestoneText = "<span style='font-size:14px;font-family:Roboto'>" + this.name + "</span>";
  var taskText = "<span style='font-size:14px;font-family:Roboto'>" + this.name + "</span>";
  } else {
    
  var milestoneText = "<span style='font-size:14px;font-family:Roboto'>" + this.name + "</span><br><span style='font-family:Roboto'><b>" + customfieldSubType + "</b></span";
  var taskText = "<span style='font-size:14px;font-family:Roboto'>" + this.name + "</span><br><span style='font-family:Roboto'><b>" + customfieldSubType + "</b></span";
    
    
  }
      
      
      
  // identify the task type and display the corresponding text
  if (numChildren > 0) {
    return parentText;
  } else {
    if (duration == 0) {
      return milestoneText;
    } else {
      return taskText;
    }
  }
​
});
​
 
// create two range markers
var marker_1 = chart.getTimeline().rangeMarker(0);
​
// set the range of the first marker
marker_1.from("2021-12-01");
marker_1.to("2022-01-05");
​
​
// set the fill of markers
//marker_1.fill("#dd2c00 0.1");
//marker_1.useHtml(true);
//marker_1.text("marker <span style='font-size:26'>1</span>");
//marker_1.offsetX(-10);
  
  
  
​
var header = chart.getTimeline().header();
​
header.level(0).fill("#64b5f6 0.2");
header.level(0).height(35);
  
​
header.level(1).height(35);
header.level(2).height(35);
​
chart.rowHoverFill("#f3f3f3");
chart.rowSelectedFill("#f3f3f3");
​
chart.getTimeline().scale().fiscalYearStartMonth(7);
​
anychart.format.outputDateTimeFormat("dd/MM/yyyy");
​
​
chart.defaultRowHeight(50);
        // set the data
        chart.data(treeData);
        // set the container id
        chart.container("container");    
        // initiate drawing the chart
        chart.draw();    
        // fit elements to the width of the timeline
        chart.fitAll();
        //chart.fitToTask();                
        //chart.zoomTo(Date.UTC(2021, 10, 3), Date.UTC(2022, 01, 6));                
});

Sample meta

AnyChart Documentation