html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/gantt-live-editing/edit-controls-styling/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/gantt-live-editing/edit-controls-styling/data.json',

    function (data) {

      // create data tree on raw data

      var treeData = anychart.data.tree(data, 'as-table');

​

      // create project gantt chart

      var chart = anychart.ganttProject();

​

      // set data for the chart

      chart.data(treeData);

​

      // make chart editable

      chart.edit(true);

​

      // set pixel position of the main splitter

      chart.splitterPosition(220);

​

      // coloring the data grid's edit controls

      chart.dataGrid().edit().fill('red 0.3').stroke('red');

​

      // coloring the data grid's placement stroke

      chart.dataGrid().edit().placementStroke({

        color: 'black',

        dash: '5 2',

        thickness: 2

      });

​

      // get timeline

      var timeline = chart.getTimeline();

​

      // coloring the timeline's edit controls

      timeline.connectors().previewStroke('3 green 0.3');

​

      timeline.elements().edit().fill('black 0.2').stroke('3 blue 0.8');

​

      // coloring the intervals editing controls

      timeline

        .elements()

        .edit()

        .thumbs()

        .fill('red')

        .stroke('black')

        .size(10); // set width of the intervals editing controls

​

      // set task progress settings

      timeline.tasks().progress().edit().fill('yellow').stroke('2 black');

​

      // set connector thumbs settings

      timeline

        .elements()

        .edit()

        .connectorThumbs()

        .fill('#9f9')

        .stroke('#090');

​

      // set the appearance control edit to start connector

      timeline

        .elements()

        .edit()

        .start()

        .connectorThumb()

        .type('triangleleft')

        .size(15) // set marker size

        .horizontalOffset(1); // set horizontal offset

​

      // set the appearance control edit to finish connector

      timeline

        .elements()

        .edit()

        .end()

        .connectorThumb()

        .type('triangleright')

        .size(15) // set marker size

        .horizontalOffset(-1); // set horizontal offset

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart all dates range

      chart.fitAll();

    }

  );

});