Edit Controls Styling

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    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();
        }
      );
    });
  
</script>
</body>
</html>
Warning!

Edit Controls Styling

Edit Controls Styling
