samples | Documentation | AnyChart Playground

HTMLcopy

 
<label>Position of Baselines:</label> 
<button onclick="baselinesAbove(true)">Above Tasks</button>
<button onclick="baselinesAbove(false)">Under Tasks</button>
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
button {
    margin: 10px 0 0 10px;
}
#container {
    position: absolute;
    width: 100%;
    top: 40px;
    bottom: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {
        id: "1",
        name: "Development",
        baselineStart: "2018-01-12",
        baselineEnd: "2018-03-04",
        actualStart: "2018-01-15",
        actualEnd: "2018-03-10",
        children: [
          {
            id: "1_1",
            name: "Analysis",
            baselineStart: "2018-01-12",
            baselineEnd: "2018-01-25",
            actualStart: "2018-01-15",
            actualEnd: "2018-01-25"
          },
          {
            id: "1_2",
            name: "Design",
            baselineStart: "2018-01-20",
            baselineEnd: "2018-01-31",
            actualStart: "2018-01-20",
            actualEnd: "2018-02-04"
          },
          {
            id: "1_3",
            name: "Meeting",
            actualStart: "2018-02-05",
            actualEnd: "2018-02-05"
          },
          {
            id: "1_4",
            name: "Implementation",
            baselineStart: "2018-02-01",
            baselineEnd: "2018-02-19",
            actualStart: "2018-02-05",
            actualEnd: "2018-02-24"
          },
          {
            id: "1_5",
            name: "Testing",
            baselineStart: "2018-02-20",
            baselineEnd: "2018-03-05",
            actualStart: "2018-02-25",
            actualEnd: "2018-03-10"
          }
      ]}
    ];
    
    // create a data tree
    var treeData = anychart.data.tree(data, "as-tree");
​
    // create a chart
    var chart = anychart.ganttProject();
​
    // set the data
    chart.data(treeData);    
​
    // configure baselines
    baselines = chart.getTimeline().baselines();
    baselines.normal().fill("#dd2c00 0.3");
    baselines.normal().stroke(null);
    baselines.selected().fill("#ef6c00 0.3");
    baselines.selected().stroke(null);
​
    // configure the scale
    chart.getTimeline().scale().maximum("2018-03-15");
    
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
​
    // fit elements to the width of the timeline
    chart.fitAll();
});
​
// set the position of baselines
function baselinesAbove(enabled) {
  baselines.above(enabled);
}

Sample meta

AnyChart Documentation