Custom Drawing

• Overview
• Project Chart
• Resource Chart

Overview

The GraphicsJS library allows replacing the default shapes of timeline elements with custom drawings.

To learn more, see:

• Graphics - GraphicsJS documentation
• Basic Charts: Custom Drawing - basic samples
• AnyGantt Gallery: Custom Drawing - an advanced sample

Project Chart

This section explains how to modify the shape of elements on a Project Gantt Chart.

You can access a particular element type or all elements at once, as shown in the following articles:

• Elements: Project Chart
• Elements: All Elements

Then call the rendering() method - for example, the rendering() method of tasks.

Combine it with methods of the anychart.core.gantt.rendering.Settings class:

• drawer() to create custom drawings (accepts a function)
• shapes() to create custom shapes (accepts an array of settings)

In the sample below, the drawer() method is used to draw custom tasks and baselines:

// a function for drawing custom elements var drawingFunction = function () { // get the shapes of the element var shapes = this["shapes"]; // get the shape to be modified var path = shapes["path"]; // get the bounds of the element var bounds = this["predictedBounds"]; var h = bounds.height; var t = bounds.top; var l = bounds.left; var r = bounds.left + bounds.width; var h1 = bounds.top + bounds.height; var h4 = h / 4; var h2 = h / 2; // draw a rounded rectangle path.moveTo(l + h4, h1 - h4) path.arcTo(h4, h4, -270, 180) path.lineTo(r - h4, t + h4) path.arcTo(h4, h4, -90, 180) path.lineTo(l + h2, h1 - h4) path.close(); } 

// set the row and header height chart.defaultRowHeight(35); chart.headerHeight(105); // set the height of timeline elements chart.getTimeline().elements().height(20); // access tasks and baselines var tasks = chart.getTimeline().tasks(); var baselines = chart.getTimeline().baselines(); // draw custom tasks and baselines tasks.rendering().drawer(drawingFunction); baselines.rendering().drawer(drawingFunction); 

Resource Chart

The Resource Gantt Chart supports only one element type - the period. This section explains how to modify its shape.

The first step is accessing periods - see the Elements: Resource Chart article to learn how to do it.

Then call the rendering() method of periods.

Combine it with methods of the anychart.core.gantt.rendering.Settings class:

• drawer() to create custom drawings (accepts a function)
• shapes() to create custom shapes (accepts an array of settings)

In the sample below, custom periods are drawn with the help of the drawer() method:

// a function for drawing custom elements var drawingFunction = function () { // get the shapes of the element var shapes = this["shapes"]; // get the shape to be modified var path = shapes["path"]; // get the bounds of the element var bounds = this["predictedBounds"]; var h = bounds.height; var t = bounds.top; var l = bounds.left; var r = bounds.left + bounds.width; var h1 = bounds.top + bounds.height; var h4 = h / 4; var h2 = h / 2; // draw a rounded rectangle path.moveTo(l + h4, h1 - h4) path.arcTo(h4, h4, -270, 180) path.lineTo(r - h4, t + h4) path.arcTo(h4, h4, -90, 180) path.lineTo(l + h2, h1 - h4) path.close(); } 

// set the row and header height chart.defaultRowHeight(35); chart.headerHeight(105); // access periods var periods = chart.getTimeline().periods(); // set the height of periods periods.height(40); // draw custom periods periods.rendering().drawer(drawingFunction);