Configuration
Frappe Gantt offers a wide range of options to customize your chart.
| Option | Description | Possible Values | Default |
|---|---|---|---|
arrow_curve |
Curve radius of arrows connecting dependencies. | Any positive integer. | 5 |
auto_move_label |
Move task labels when user scrolls horizontally. | true, false |
false |
bar_corner_radius |
Radius of the task bar corners (in pixels). | Any positive integer. | 3 |
bar_height |
Height of task bars (in pixels). | Any positive integer. | 30 |
container_height |
Height of the container. | auto - dynamic container height to fit all tasks - or any positive integer (for pixels). |
auto |
column_width |
Width of each column in the timeline. | Any positive integer. | 45 |
date_format |
Format for displaying dates. | Any valid JS date format string. | YYYY-MM-DD |
upper_header_height |
Height of the upper header in the timeline (in pixels). | Any positive integer. | 45 |
lower_header_height |
Height of the lower header in the timeline (in pixels). | Any positive integer. | 30 |
snap_at |
Snap tasks at particular intervel while resizing or dragging. | Any interval (see below) | 1d |
infinite_padding |
Whether to extend timeline infinitely when user scrolls. | true, false |
true |
holidays |
Highlighted holidays on the timeline. | Object mapping CSS colors to holiday types. Types can either be a) 'weekend', or b) array of strings or date objects or objects in the format {date: ..., label: ...} |
{ 'var(--g-weekend-highlight-color)': 'weekend' } |
ignore |
Ignored areas in the rendering | weekend or Array of strings or date objects (weekend can be present to the array also). |
[] |
language |
Language for localization. | ISO 639-1 codes like en, fr, es. |
en |
lines |
Determines which grid lines to display. | none for no lines, vertical for only vertical lines, horizontal for only horizontal lines, both for complete grid. |
both |
move_dependencies |
Whether moving a task automatically moves its dependencies. | true, false |
true |
padding |
Padding around task bars (in pixels). | Any positive integer. | 18 |
popup_on |
Event to trigger the popup display. | click or hover |
click |
readonly_progress |
Disables editing task progress. | true, false |
false |
readonly_dates |
Disables editing task dates. | true, false |
false |
readonly |
Disables all editing features. | true, false |
false |
scroll_to |
Determines the starting point when chart is rendered. | today, start, end, or a date string. |
today |
show_expected_progress |
Shows expected progress for tasks. | true, false |
false |
today_button |
Adds a button to navigate to today’s date. | true, false |
true |
view_mode |
The initial view mode of the Gantt chart. | Day, Week, Month, Year. |
Day |
view_mode_select |
Allows selecting the view mode from a dropdown. | true, false |
false |
Apart from these ones, two options - popup and view_modes (plural, not singular) - are available. They have "sub"-APIs, and thus are listed separately.
View Mode Configuration
The view_modes option determines all the available view modes for the chart. It should be an array of objects.
Each object can have the following properties:
- name (string) - the name of view mode.
- padding (interval) - the time above.
- step - the interval of each column
- lower_text (date format string or function) - the format for text in lower header. Blank string for none. The function takes in currentDate, previousDate, and lang, and should return a string.
- upper_text (date format string or function) - the format for text in upper header. Blank string for none. The function takes in currentDate, previousDate, and lang, and should return a string.
- upper_text_frequency (number) - how often the upper text has a value. Utilized in internal calculation to improve performance.
- thick_line (function) - takes in currentDate, returns Boolean determining whether the line for that date should be thicker than the others.
Three other options allow you to override general configuration for this view mode alone:
- date_format
- column_width
- snap_at
For details, see the above table.
Popup Configuration
popup is a function. If it returns
- false, there will be no popup.
- undefined, the popup will be rendered based on manipulation within the function
- a HTML string, the popup will be that string.
The function receives one object as an argument, containing:
- task - the task as an object
- chart - the entire Gantt chart
- get_title, get_subtitle, get_details (functions) - get the relevant section as a HTML node.
- set_title, set_subtitle, set_details (functions) - take in the HTML of the relevant section
- add_action (function) - accepts two parameters, html and func - respectively determining the HTML of the action and the callback when the action is pressed.
API
Frappe Gantt exposes a few helpful methods for you to interact with the chart:
| Name | Description | Parameters |
|---|---|---|
.update_options |
Re-renders the chart after updating specific options. | new_options - object containing new options. |
.change_view_mode |
Updates the view mode. | view_mode - Name of view mode or view mode object (see above) and maintain_pos - whether to go back to current scroll position after rerendering, defaults to false. |
.scroll_current |
Scrolls to the current date | No parameters. |
.update_task |
Re-renders a specific task bar alone | task_id - id of task and new_details - object containing the task properties to be updated. |