How can i set labels on periods in the ganttResource anychart 8.1.0 - gantt-chart

Question

Hi i want to put a label on a period
If i use version 7.7.0 I can achive it using it like this:
http://jsfiddle.net/NightKaos/nd5nwb1s/3/
{
"id": "1",
"name": "Phase 1 - Strategic Plan",
"periods": [
{
"id": "1_1",
"start": 1171468800000,
"end": 1171906900000,
"fill": "#00FF33",
"progressValue": "25%",
'label': {
"value": 'Custom Label ',
'anchor': 'center',
'position': 'center',
'hAlign': 'center'
},
}
How can i do it on version 8.1.0?
I can access task name but not periods data.
I have a sample in here:
https://jsfiddle.net/NightKaos/zffqhz74/2/

Answer 1

You can set the label text and properties from the data in 8.1.0 just as you did in 7.7.0
Please check the following example
// set label object to configure labels in periods
var data = [
{
"id": "1",
"name": "Period 1",
"periods": [
{
"id": "1_1",
"start": 1171468800000,
"end": 1171987200000,
"label" : {
"format":"Label 1 in the center",
"anchor": "center",
"position": "center"
}
}]
},
{
"id": "2",
"name": "Period 2",
"periods": [
{
"id": "1_2",
"start": 1171668800000,
"end": 1171887200000,
"label" : {
"format":"Label 2 in the center",
"anchor": "center",
"position": "center"
}
}]
}
];
anychart.onDocumentReady(function () {
var treeData = anychart.data.tree(data, "as-table");
chart = anychart.ganttResource();
chart.container("container");
chart.bounds(0, 0, "100%", "100%");
chart.data(treeData);
chart.splitterPosition(170);
var dataGrid = chart.dataGrid();
// settings for first column
dataGrid.column(0).width(30).title().text("#");
// settings for the second column
dataGrid.column(1).width(140).format(function (item) {
return item.get("name");
}).title().text("Person");
//enable period labels
chart.getTimeline().baseLabels(true);
chart.draw();
chart.fitAll();
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" />
<div id="container"></div>