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

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>