html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

// Converting full date to a

Date.prototype.secondsInCurrentHour=function(){

    let date = new Date(this); // create a new Date object with the given timestamp

    let minutes = date.getMinutes(); // get the number of minutes in the current hour

    let seconds = date.getSeconds(); // get the number of seconds in the current minute

    let secondsInHour = minutes * 60 + seconds; // calculate the total number of seconds in the current hour

    return secondsInHour

};

​

anychart.onDocumentReady(function() {

var data = [

  {

    id: "1",

    name: "Robot Line",

    actualStart: "2023-02-21T01:00:54",

    actualEnd: "2023-02-21T01:01:14",

    children: [

      {

        id: "1_1",

        name: "Assembly",

        actualStart: "2023-02-21T01:00:57",

        actualEnd: "2023-02-21T01:01:01"

      },

      {

        id: "1_2",

        name: "Welding",

        actualStart: "2023-02-21T01:01:01",

        actualEnd: "2023-02-21T01:01:06"

      },

      {

        id: "1_3",

        name: "Painting",

        actualStart: "2023-02-21T01:01:06",

        actualEnd: "2023-02-21T01:01:14"

      }

    ]

  }

];

                // create a data tree

                var treeData = anychart.data.tree(data, "as-tree", null, {

                    children: "children"

                });

                // map the data

                var mapping = treeData.mapAs({

                    actualStart: "actualStart",

                    actualEnd: "actualEnd",

                    name: "name"

                });

                // create a data tree

                // var mapping = anychart.data.tree(data, "as-tree");

                anychart.format.outputDateTimeFormat("d MMMM");

                // create a chartec 

​

                var chart = anychart.ganttProject();

​

                // set the data

                chart.data(mapping);

​

                // set the container id

                chart.container("container");

                // set the data

                chart.dataGrid().fixedColumns(true);

                // chart.splitterPosition().hide();

                chart.dataGrid().column().enabled(false);

                chart.dataGrid().column(0).enabled(false);

                chart.getTimeline().elements().labels(false);

                chart.rowHoverFill("#ffd54f 0.3");

                chart.rowSelectedFill("#ffd54f 0.3");

                chart.rowStroke("0.5 #64b5f6");

                chart.columnStroke("0.5 #64b5f6");

​

                chart.dataGrid().column(0).enabled(false);

​

                var title = chart.title();

                title.enabled(true);

                title.text("Gantt Chart");

                title.fontColor("#64b5f6");

                title.fontSize(18);

                title.fontWeight(600);

                title.padding(5);

​

                scale = chart.xScale();

​

                // Set zoom levels.

                scale.zoomLevels([

                       [{

                            unit: 'millisecond',

                            count: 0

                        },

                        {

                            unit: 'second',

                            count: 1

                        }

                    ]

                ]);

                // configure the levels of the timeline header

                var header = chart.getTimeline().header();

                // this function format apperance of a seconds in a timeline header

                header.level(0).format((e)=>{

                let tickDate = new Date(e.tickValue)

                let currentSecond = tickDate.secondsInCurrentHour(e.tickValue)

                return currentSecond

                });

                header.level(1).enabled(false);

                header.level(2).enabled(false);

                chart.headerHeight(50);

                // initiate drawing the chart

                chart.draw();

                // fit elements to the width of the timeline

                chart.fitAll();

        });