HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
var data = getData();
3
4
var chart = anychart.ganttProject();
5
chart.data(data, 'as-table');
6
7
var timeLine = chart.getTimeline();
8
9
var textMarker = timeLine.textMarker();
10
textMarker.value('2000-02-27T00:00:00');
11
textMarker.padding(5);
12
textMarker.background().stroke('2 #F44336');
13
14
// Enable background.
15
textMarker.background(true);
16
17
chart.title('Enable text marker background');
18
chart.container('container');
19
chart.draw();
20
chart.fitAll();
21
});
22
23
function getData() {
24
return [
25
{id: 1, name: 'Phase 1 - Strategic Plan', progressValue: 0.14, actualStart: '2000-02-24T08:00:00', actualEnd: '2000-02-27T08:00:00'},
26
{id: 2, name: 'Self-Assessment', parent: 1, progressValue: 0.25, actualStart: '2000-02-24T08:00:00', actualEnd: '2000-02-29T08:00:00', baselineStart: '2000-02-27T08:00:00', baselineEnd: '2000-02-28T08:00:00'},
27
{id: 3, name: 'Define business vision', parent: 2, progressValue: 0, actualStart: '2000-02-25T00:00:00', actualEnd: '2000-02-25T09:00:00', connectTo: 4},
28
{id: 4, name: 'Identify available skills, information and support', parent: 2, progressValue: '0%', actualStart: '2000-02-26T00:00:00', actualEnd: '2000-02-26T09:00:00', connectTo: 5},
29
{id: 5, name: 'Decide whether to proceed', parent: 2, progressValue: 0, actualStart: '2000-02-27T08:00:00', actualEnd: '2000-02-28T08:00:00', connectTo: 6,},
30
{id: 6, name: 'Define the Opportunity', parent: 1, progressValue: 0.27, actualStart: '2000-02-28T08:00:00', actualEnd: '2000-02-29T08:00:00'},
31
{id: 7, name: 'Research the market and competition', parent: 6, progressValue: 0, actualStart: '2000-02-26T08:00:00', actualEnd: '2000-02-27T08:00:00'}
32
];
33
}