Gantt chart
- Example
- Properties
- Methods
- Adding events to your Gantt charts
- Adding vertical and horizontal bars to your Gantt chart
- Events
- Effects
Example
<script> new RGraph.Gantt({ id: 'cvs', data: [ [ {start: 31, duration: 28, complete: null, label: 'Richard', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 91, duration: 2, complete: null, label: 'Richard', background: null, color: null, border: 'rgba(0,0,0,0)'} ], {start: 31, duration: 28, complete: null, label: 'Fred', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 59, duration: 14, complete: null, label: 'Barney', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 59, duration: 21, complete: null, label: 'Gloria', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 59, duration: 31, complete: null, label: 'Paul', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 80, duration: 21, complete: null, label: 'Harry', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 94, duration: 7, complete: null, label: 'Shane', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 120, duration: 14, complete: null, label: 'Barry', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 130, duration: 14, complete: null, label: 'Cynthia', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 211, duration: 61, complete: null, label: 'Graham', background: null, color: null, border: 'rgba(0,0,0,0)'}, {start: 334, duration: 31, complete: null, label: 'Paul', background: null, color: null, border: 'rgba(0,0,0,0)'} ], options: { backgroundGridVlinesCount: 12, titleBold: true, titleSize: 16, xaxisScaleMax: 365, marginLeft: 75, xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], title: 'Holiday schedule for Xyz Ltd', colorsDefault: 'rgba(255,0,0,1)', names: ['Richard','Fred','Barney','Gloria','Paul','Harry','Shane','Barry','Cynthia','Graham','Paul'], durations: ['28 days','2 days', '28 days','two weeks','3 weeks','31 days','three weeks','one week','two weeks','two weeks','August and September','31 days'], tooltips: '<b>%{property:names[%{dataset}]}</b><br />%{property:names[%{dataset}]} is off work for %{property:durations[%{sequential_index}]}', tooltipsCss: { fontSize: '16pt', textAlign: 'left' }, backgroundVbars: [ [0, 31, 'rgba(192,255,192,0.5)'], [59, 31, 'rgba(192,255,192,0.5)'], [120, 31, 'rgba(192,255,192,0.5)'], [181, 31, 'rgba(192,255,192,0.5)'], [243, 30, 'rgba(192,255,192,0.5)'], [304, 30, 'rgba(192,255,192,0.5)'] ] } }).draw(); </script>
Properties
You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as shown above.
- Background properties
- X-axis properties
- Y-axis properties
- Color properties
- Margin properties
- Labels and text properties
- Title properties
- Interactive features properties
- Miscellaneous properties
Background properties
The number of background bars.
Default: 5
backgroundBarsColor1
Color of the background bars.
Default: white
backgroundBarsColor2
Color of the background bars.
Default: white
backgroundGrid
Whether a grid is shown as part of the background.
Default: true
backgroundGridColor
The color of the background grid.
Default: #eee
backgroundGridLinewidth
The
linewidth
of the background grid.Default: 1
backgroundGridVlinesCount
When using autofit this allows you to specify how many vertical gridlines you want.
Default: 20
backgroundGridDotted
If you want to have your background grid dashed then set this to true.
Default: false
backgroundGridDashed
If you want to have your background grid dotted then set this to true. This takes precedence over dashed lines.
Default: false
backgroundVbars
Vertical bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.
Default: [] (An empty array)
backgroundHbars
Horizontal bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.
Default: [] (An empty array)
backgroundColor
If you want to have a single background color for your chart you can use this. It doesn't cover the margins. If you want that then you can simply apply a
css
background color to the canvas
tag.Default: null
X-axis properties
Set this to true if you want an
x-axis
.Default: false
xaxisScaleMax
Required. This determines how many "units" wide the
Gantt chart
is. For example, to represent a year, you would use 365, giving a granularity of one day.Default: none
xaxisScaleMin
This option can sometimes make using a
Gantt chart
spread over several pages easier.Default: 0
xaxisPosition
This determines where the
x-axis
labels are positioned.Default: bottom
xaxisLinewidth
The
linewidth
used for the x-axis
and the x-axis
tickmarks (if they're displayed).Default: 1
xaxisColor
The color of the
x-axis
(and its tickmarks.Default: black
xaxisTickmarks
Whether the
x-axis
tickmarks are shown.Default: true
xaxisTickmarksLastLeft
Whether the last tickmark on the left is displayed.
Default: null
xaxisTickmarksLastRight
Whether the last tickmark on the right is displayed.
Default: null
xaxisTickmarksLength
The length of the tickmarks.
Default: 3
xaxisTickmarksCount
The number of tickmarks that are shown on the
x-axis
.Default: null
xaxisLabels
An array of the labels to be used on the chart.
Default: An empty array
xaxisLabelsFont
The font used to render the labels.
Default: null
xaxisLabelsSize
The size of the labels.
Default: null
xaxisLabelsColor
The color of the labels.
Default: null
xaxisLabelsBold
Whether the labels are bold or not.
Default: null
xaxisLabelsItalic
Whether the labels are italic or not.
Default: null
xaxisLabelsOffsetx
This allows you finer-grained control in the horizontal direction over the X label positioning if you need it.
Default: 0
xaxisLabelsOffsety
This allows you finer-grained control in the vertical direction over the X label positioning if you need it.
Default: 0
xaxisLabelsHalign
The horizontal alignment of the labels.
Default: center
xaxisLabelsValign
The vertical alignment of the labels.
Default: top
xaxisLabelsAngle
The angle of the
x-axis
labels. For example, you could set this to 45 to get angled labels.Default: 0 (Horizontal)
xaxisLabelsPosition
This property controls how the labels are arranged -
section
for most chart types and edge
for Line charts
. You probably won't need to change this.Default: section
xaxisLabelsClass
This property allows you to add your own
css
class to the x-axis
labels which you can then use for styling purposes or to make retrieving the span
tags easier (the dom
elements). If you inspect the labels in your browser's javascript
console (you will first need to enable the textAccessiblePointerevents
property) you will be able to see the other css
classes that are assigned to the labels.Default: [none]
xaxisTitle
This allows you to specify a title for the
x-axis
.Default: none
xaxisTitleSize
This allows you to specify a size for the
x-axis
title.Default: null
xaxisTitleFont
This allows you to specify a font for the
x-axis
title.Default: null
xaxisTitleBold
This controls whether the
x-axis
title is bold or not.Default: null
xaxisTitleItalic
This controls whether the
x-axis
title is italic or not.Default: null
xaxisTitleColor
This controls the color of the
x-axis
title.Default: null
xaxisTitleX
By giving this you can specifically set the X coordinate of the
x-axis
title.Default: null
xaxisTitleY
By giving this you can specifically set the Y coordinate of the
x-axis
title.Default: null
xaxisTitleOffsetx
The horizontal offset that's applied to the title.
Default: 0
xaxisTitleOffsety
The vertical offset that's applied to the title.
Default: 0
xaxisTitleHalign
The horizontal alignment of the title.
Default: center
xaxisTitleValign
The vertical alignment of the title.
Default: top
xaxisTitlePos
This is a multiplier (ie a digit usually between 0 and 1) that gets multiplied with the margin to get the Y position of the title.
Default: null
Y-axis properties
Whether the
y-axis
is drawn.Default: false
yaxisLinewidth
The
linewidth
of the y-axis
.Default: 1
yaxisColor
The color of the
y-axis
.Default: black
yaxisLabelsPosition
This controls how the specific labels are positioned on the
y-axis
. It has no effect on a scale.Default: section
yaxisLabelsFont
The font that's used by the
y-axis
labels.Default: null
yaxisLabelsSize
The size of the
y-axis
labels.Default: null
yaxisLabelsColor
The color of the
y-axis
labels.Default: null
yaxisLabelsBold
Whether the
y-axis
labels are bold or not.Default: null
yaxisLabelsItalic
Whether the
y-axis
labels are italic or not.Default: null
yaxisLabelsOffsetx
This allows you finer-grained control in the horizontal direction over the Y label positioning if you need it.
Default: 0
yaxisLabelsOffsety
This allows you finer-grained control in the vertical direction over the Y label positioning if you need it.
Default: 0
yaxisLabelsHalign
The horizontal alignment of the
y-axis
labels.Default: null
yaxisLabelsValign
The vertical alignment of the
y-axis
labels.Default: null
yaxisTitle
This allows you to specify a title for the
y-axis
.Default: none
yaxisTitleSize
This allows you to specify a size for the
y-axis
title.Default: null
yaxisTitleFont
This allows you to specify a font for the
y-axis
title.Default: null
yaxisTitleBold
This controls whether the
y-axis
title is bold or not.Default: null
yaxisTitleColor
This controls what color the
y-axis
title is.Default: null
yaxisTitleItalic
This controls whether the
y-axis
title is italic or not.Default: null
yaxisTitlePos
This is multiplied with the margin to give the position of the
y-axis
title.Default: 0.25
yaxisTitleOffsetx
The pixel offset that's added to the
y-axis
titles X coordinate.Default: 0
yaxisTitleOffsety
The pixel offset that's added to the
y-axis
titles Y coordinate.Default: 0
yaxisTitleX
By giving this you can specifically set the X position of the
y-axis
title.Default: null
yaxisTitleY
By giving this you can specifically set the Y position of the
y-axis
title.Default: null
yaxisTitleHalign
The horizontal alignment of the
y-axis
title.Default: 0
yaxisTitleValign
The vertical alignment of the
y-axis
title.Default: 0
yaxisTitleAccessible
With this property you can control whether the
y-axis
title is accessible or not.Default: true
Color properties
Property | Description | Default |
---|---|---|
colorsDefault | The default color of bars. If you don't specify a color for the event, this will be used. | white |
The default color of bars. If you don't specify a color for the event, this will be used.
Default: white
Margin properties
The left margin of the chart, (the margin is where the labels and title are)).
Default: 75
marginRight
The right margin of the chart, (the margin is where the labels and title are).
Default: 35
marginTop
The top margin of the chart, (the margin is where the labels and title are).
Default: 35
marginBottom
The bottom margin of the chart, (the margin is where the labels and title are).
Default: 35
marginInner
Acts much like the
marginInner
setting for the Bar chart
. By using this setting you can give yourself thin bars.Default: 2
Labels and text properties
Property | Description | Default |
---|---|---|
textAccessible | A new feature in 2016 that allows you to use dom text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this:
<div style="margin-left: 50px; display: inline-block"> <canvas id="cvs" width="650" height="250"></canvas> </div> | false |
textAccessibleOverflow | This can be visible or hidden and it controls whether the text is clipped to the edges of the canvas . It defaults to be visible and means you can set small margins if you wish. | visible |
textAccessiblePointerevents | This controls whether the dom text responds to mouse-based events or not (it sets the pointer-events css property to none ). | false |
textSize | The size of the text (in points). | 12 |
textFont | The font used to render the text. | Arial, Verdana, sans-serif |
textColor | The color of the labels. | black |
textBold | Whether the text on the chart is bold or not. | false |
textItalic | Whether the text on the chart is italic or not. | false |
labelsInbar | An array of labels that are drawn inside the Gantt chart bars. These labels can also be drawn on the right of these bars. | null |
labelsInbarAlign | This controls whether the labels are aligned left , center or right when the labels are drawn inside the bars. | left |
labelsInbarBgcolor | The background color for the text. By default, there's no background to the text. | null |
labelsInbarColor | The color of the labels. | null |
labelsInbarFont | The font used to draw the labels. | null |
labelsInbarSize | The size of the text labels. | null |
labelsInbarBold | Whether the inbar labels are bold or not. | null |
labelsInbarItalic | Whether the inbar labels are italic or not. | null |
labelsInbarAbove | If you prefer, the labels can be drawn "above" the bars (actually to the right but for api compatibility it's called "above"). | false |
labelsInbarOffsetx | This allows you finer-grained control in the horizontal direction over the text positioning if you need it. | 0 |
labelsInbarOffsety | This allows you finer-grained control in the vertical direction over the text positioning if you need it. | 0 |
labelsComplete | This allows you to turn off the "percent complete" indicator if you want to. | true |
labelsCompleteFont | The font used to render the percent-complete number. | null |
labelsCompleteSize | The size of the text. | null |
labelsCompleteColor | The color of the text. | null |
labelsCompleteBold | Whether the text is bold or not. | null |
labelsCompleteItalic | Whether the text is italic or not. | null |
labelsCompleteOffsetx | This allows you finer-grained control in the horizontal direction over the text positioning if you need it. | 0 |
labelsCompleteOffsety | This allows you finer-grained control in the vertical direction over the text positioning if you need it. | 0 |
text | This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here. | null |
A new feature in 2016 that allows you to use
dom
text in place of canvas
text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas
but to wrap the canvas
in a div
and set them on that like this:
<div style="margin-left: 50px; display: inline-block"> <canvas id="cvs" width="650" height="250"></canvas> </div>
Default: false
textAccessibleOverflow
This can be
visible
or hidden
and it controls whether the text is clipped to the edges of the canvas
. It defaults to be visible and means you can set small margins if you wish.Default: visible
textAccessiblePointerevents
This controls whether the
dom
text responds to mouse-based events or not (it sets the pointer-events
css
property to none
).Default: false
textSize
The size of the text (in points).
Default: 12
textFont
The font used to render the text.
Default: Arial, Verdana, sans-serif
textColor
The color of the labels.
Default: black
textBold
Whether the text on the chart is bold or not.
Default: false
textItalic
Whether the text on the chart is italic or not.
Default: false
labelsInbar
An
array
of labels that are drawn inside the Gantt chart
bars. These labels can also be drawn on the right of these bars.Default: null
labelsInbarAlign
This controls whether the labels are aligned
left
, center
or right
when the labels are drawn inside the bars.Default: left
labelsInbarBgcolor
The background color for the text. By default, there's no background to the text.
Default: null
labelsInbarColor
The color of the labels.
Default: null
labelsInbarFont
The font used to draw the labels.
Default: null
labelsInbarSize
The size of the text labels.
Default: null
labelsInbarBold
Whether the inbar labels are bold or not.
Default: null
labelsInbarItalic
Whether the inbar labels are italic or not.
Default: null
labelsInbarAbove
If you prefer, the labels can be drawn "above" the bars (actually to the right but for
api
compatibility it's called "above").Default: false
labelsInbarOffsetx
This allows you finer-grained control in the horizontal direction over the text positioning if you need it.
Default: 0
labelsInbarOffsety
This allows you finer-grained control in the vertical direction over the text positioning if you need it.
Default: 0
labelsComplete
This allows you to turn off the "percent complete" indicator if you want to.
Default: true
labelsCompleteFont
The font used to render the percent-complete number.
Default: null
labelsCompleteSize
The size of the text.
Default: null
labelsCompleteColor
The color of the text.
Default: null
labelsCompleteBold
Whether the text is bold or not.
Default: null
labelsCompleteItalic
Whether the text is italic or not.
Default: null
labelsCompleteOffsetx
This allows you finer-grained control in the horizontal direction over the text positioning if you need it.
Default: 0
labelsCompleteOffsety
This allows you finer-grained control in the vertical direction over the text positioning if you need it.
Default: 0
text
This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.
Default: null
Title properties
The title of the chart, if any.
Default: null
titleFont
The font that the title is rendered in. If not specified the
textFont
setting is used (usually Arial
).Default: null
titleSize
The size of the title. If not specified the size is usually
4pt
bigger than the textSize
setting.Default: null
titleBold
Whether the title is bold or not.
Default: null
titleItalic
Whether the title is italic or not.
Default: null
titleColor
The color of the title.
Default: null
titleX
To give the exact X coordinate for the title - use this. This can also be a string like this:
"-5"
- in which case it's converted to a number and added to the calculated coordinate - allowing you to adjust the calculated coordinate.Default: null
titleY
To give the exact Y coordinate for the title - use this. This can also be a string like this:
"-5"
- in which case it's converted to a number and added to the calculated coordinate - allowing you to adjust the calculated coordinate.Default: null
titleHalign
The horizontal alignment of the title.
Default: center (can change depending on other options)
titleValign
The vertical alignment of the title.
Default: center (can change depending on other options)
titleOffsetx
You can use this property to adjust the positioning of the title in the horizontal direction (positive values adjust the title to the right and negative values adjust it to the left).
Default: 0
titleOffsety
You can use this property to adjust the positioning of the title in the vertical direction (positive values adjust the title downwards and negative values adjust it upwards).
Default: 0
titleSubtitle
The subtitle of the chart. If a subtitle is specified the title is moved up to accommodate it. As such you might need to give a larger
marginTop
value.Default: null
titleSubtitleSize
The size of the font used to render the subtitle.
Default: null
titleSubtitleColor
The color of the subtitle.
Default: #aaa
titleSubtitleFont
The font used to render the subtitle.
Default: null
titleSubtitleBold
Whether the subtitle is bold or not.
Default: null
titleSubtitleItalic
Whether the subtitle is italic or not.
Default: null
titleSubtitleOffsetx
Use this property to adjust the horizontal position of the subtitle.
Default: 0
titleSubtitleOffsety
Use this property to adjust the vertical position of the subtitle.
Default: 0
Interactive features properties
Property | Description | Default |
---|---|---|
tooltips | An array of tooltips that are shown when the bars are clicked. They can contain html . | (An empty array) |
tooltipsEvent | This is the event that triggers the tooltips. It can be either click or mousemove . | onclick |
tooltipsEffect | The effect used for showing tooltips. Possible values are slide fade or none . | slide |
tooltipsOverride | If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page. | null |
tooltipsFormattedPoint | When using formatted tooltip strings this is used as the point when using the %{value_formatted} option. | . |
tooltipsFormattedThousand | When using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option. | , |
tooltipsFormattedDecimals | When using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option. | 0 |
tooltipsFormattedUnitsPre | When using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option. | (an empty string) |
tooltipsFormattedUnitsPost | When using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option. | (an empty string) |
tooltipsFormattedListType | With this property you can switch between an unordered list (the default) and an ordered list. Possible values are ul and ol . | ul |
tooltipsFormattedListItems | This should be a two-dimensional array of the list items that are to be shown for all of the tooltips. An example of this property is:tooltipsFormattedListItems: [ ['Bill','Jerry','Berty'], // First tooltip ['Gill','Carrie','Lucy'], // Second tooltip ['Pob','Nobby','Hilda'] // Third tooltip ]You can use css to style this list - for example:.RGraph_tooltip ul#rgraph_formatted_tooltips_list li { text-align: left; color: yellow; } | null |
tooltipsFormattedTableHeaders | When showing a table in the tooltips this can be an array of headers for the table. These are added to the tooltip using th tags. | null |
tooltipsFormattedTableData | This is the data that is added to the table. This is a 3-dimensional array so it's easy to make a mistake. See the example, copy the code from it and then modify it suit. You'll create fewer bugs this way. | null) |
tooltipsPointer | By default, the tooltips have a small triangular pointer that points to the shape that was clicked on. You can turn this off with this property. | true |
tooltipsPointerCss | If you want any css values applied to the tooltips pointer (for example, a css border) then specify an object containing those values to this property. For example: tooltipsPointerCss: { borderLeft: 'gray 2px solid', borderBottom: 'gray 2px solid' } | null |
tooltipsPointerOffsetx | This allows you to adjust the vertical position of the tooltips pointer. | 0 |
tooltipsPointerOffsety | This allows you to adjust the vertical position of the tooltips pointer (for example, if you add a border you may need to move it down slightly). | 0 |
tooltipsPositionStatic | The new default (as of August 2020) is for tooltips to be positioned statically and not be dependent on the mouse position. If you don't want this for whatever reason, you can disable it with this setting. When you set it to false tooltips are positioned next to the mouse pointer. | true |
tooltipsCss | If you want to specify some css that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object css for the tooltips. These are css styles that get applied to all of the tooltips for the specific object only. It should look like this:tooltipsCss: { fontFamily: 'Verdana', fontSize: '20pt' } | null |
tooltipsCssClass | This is the name of the css class the chart uses. | RGraph_tooltip |
tooltipsOffsetx | This property allows you to shift the tooltips left or right. | 0 |
tooltipsOffsety | This property allows you to shift the tooltips up or down. | 0 |
tooltipsHotspotIgnore | This can be a number of things and can be used to ignore certain tooltip hotspots - which can allow charts to the rear to be clickable. There's an example of this in the download archive called pie-tooltipshotspotignore.html . You can use the transparent color to allow the rear chart to be seen in such a case. It can be:
| null |
contextmenu | An array of context menu items. Cannot be used in conjunction with tooltips. | (An empty array) |
annotatable | Whether annotations are enabled for the chart (ie you can draw on the chart interactively. | false |
annotatableColor | If you do not allow the use of the palette, then this will be the only color allowed for annotations. | black |
annotatableLinewidth | This is the linewidth of the annotations. | 1 |
adjustable | Defaulting to false , this determines whether your Gantt chart will be adjustable. | false |
adjustableOnly | This should be an array of values that determine whether a Bar is adjustable or not. A truthy value for when it is, a falsey value for when it's not. | null |
An array of tooltips that are shown when the bars are clicked. They can contain
html
.Default: (An empty array)
tooltipsEvent
This is the event that triggers the tooltips. It can be either
click
or mousemove
.Default: onclick
tooltipsEffect
The effect used for showing tooltips. Possible values are
slide
fade
or none
.Default: slide
tooltipsOverride
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page.
Default: null
tooltipsFormattedPoint
When using formatted tooltip strings this is used as the point when using the
%{value_formatted}
option.Default: .
tooltipsFormattedThousand
When using formatted tooltip strings this is used as the thousand separator when using the
%{value_formatted}
option.Default: ,
tooltipsFormattedDecimals
When using formatted tooltip strings this specifies the number of decimals when using the
%{value_formatted}
option.Default: 0
tooltipsFormattedUnitsPre
When using formatted tooltip strings these units are prepended to the number when using the
%{value_formatted}
option.Default: (an empty string)
tooltipsFormattedUnitsPost
When using formatted tooltip strings these units are appended to the number when using the
%{value_formatted}
option.Default: (an empty string)
tooltipsFormattedListType
With this property you can switch between an unordered list (the default) and an ordered list. Possible values are
ul
and ol
.Default: ul
tooltipsFormattedListItems
This should be a two-dimensional array of the list items that are to be shown for all of the tooltips. An example of this property is:
tooltipsFormattedListItems: [ ['Bill','Jerry','Berty'], // First tooltip ['Gill','Carrie','Lucy'], // Second tooltip ['Pob','Nobby','Hilda'] // Third tooltip ]You can use
css
to style this list - for example:.RGraph_tooltip ul#rgraph_formatted_tooltips_list li { text-align: left; color: yellow; }
Default: null
tooltipsFormattedTableHeaders
When showing a table in the tooltips this can be an array of headers for the table. These are added to the tooltip using
th
tags.Default: null
tooltipsFormattedTableData
This is the data that is added to the table. This is a 3-dimensional array so it's easy to make a mistake. See the example, copy the code from it and then modify it suit. You'll create fewer bugs this way.
Default: null)
tooltipsPointer
By default, the tooltips have a small triangular pointer that points to the shape that was clicked on. You can turn this off with this property.
Default: true
tooltipsPointerCss
If you want any
css
values applied to the tooltips pointer (for example, a css
border) then specify an object containing those values to this property. For example: tooltipsPointerCss: { borderLeft: 'gray 2px solid', borderBottom: 'gray 2px solid' }
Default: null
tooltipsPointerOffsetx
This allows you to adjust the vertical position of the tooltips pointer.
Default: 0
tooltipsPointerOffsety
This allows you to adjust the vertical position of the tooltips pointer (for example, if you add a border you may need to move it down slightly).
Default: 0
tooltipsPositionStatic
The new default (as of August 2020) is for tooltips to be positioned statically and not be dependent on the mouse position. If you don't want this for whatever reason, you can disable it with this setting. When you set it to
false
tooltips are positioned next to the mouse pointer.Default: true
tooltipsCss
If you want to specify some
css
that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style
object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object css
for the tooltips. These are css
styles that get applied to all of the tooltips for the specific object only. It should look like this:tooltipsCss: { fontFamily: 'Verdana', fontSize: '20pt' }
Default: null
tooltipsCssClass
This is the name of the
css
class the chart uses.Default: RGraph_tooltip
tooltipsOffsetx
This property allows you to shift the tooltips left or right.
Default: 0
tooltipsOffsety
This property allows you to shift the tooltips up or down.
Default: 0
tooltipsHotspotIgnore
This can be a number of things and can be used to ignore certain tooltip hotspots - which can allow charts to the rear to be clickable. There's an example of this in the download archive called
pie-tooltipshotspotignore.html
. You can use the transparent
color to allow the rear chart to be seen in such a case. It can be:
- A single
boolean
value (ietrue
orfalse
) to enable or disable all of the hotspots -true
means the hotspot will be ignored - A single number (the zero-indexed number corresponding to the hotspot to ignore)
- An array of numbers (the numbers are the indexes of hotspots to ignore)
- An array of
boolean
true
orfalse
values - the position of these values correspond to the index(es) of the segments to ignore (for example[false, false, true, false, false]
-true
means the corresponding hotspot will be ignored)
Default: null
contextmenu
An array of context menu items. Cannot be used in conjunction with tooltips.
Default: (An empty array)
annotatable
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false
annotatableColor
If you do not allow the use of the palette, then this will be the only color allowed for annotations.
Default: black
annotatableLinewidth
This is the
linewidth
of the annotations.Default: 1
adjustable
Defaulting to
false
, this determines whether your Gantt chart
will be adjustable.Default: false
adjustableOnly
This should be an array of values that determine whether a Bar is adjustable or not. A
truthy
value for when it is, a falsey
value for when it's not.Default: null
Miscellaneous properties
Property | Description | Default |
---|---|---|
highlightStyle | By default, this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument. As of version 5.23 you can also set this to invert as well. If you do this on a dark background you may find that you need to change the highlightFill color setting as well. | null |
highlightStroke | If you use tooltips, this controls the color of the highlight stroke. | black |
highlightFill | If you use tooltips, this controls the color of the highlight fill. | rgba(255,255,255,0.5) |
borders | Whether a border is shown on the event bars. | true |
clearto | This is used in animations and effects as the default color to use when the canvas is cleared. | null |
responsive | This option is new to the July 2023 release (v6.13) and allows you to inline the responsive configuration instead of appending it on to the end of the object it as a function. The documentation and demo pages have been updated to use this new option. You can read more about the responsive feature by reading the responsive configuration page. | null |
By default, this is
null
but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument. As of version 5.23 you can also set this to invert
as well. If you do this on a dark background you may find that you need to change the highlightFill
color setting as well.Default: null
highlightStroke
If you use tooltips, this controls the color of the highlight stroke.
Default: black
highlightFill
If you use tooltips, this controls the color of the highlight fill.
Default: rgba(255,255,255,0.5)
borders
Whether a border is shown on the event bars.
Default: true
clearto
This is used in animations and effects as the default color to use when the
canvas
is cleared.Default: null
responsive
This option is new to the July 2023 release (v6.13) and allows you to inline the responsive configuration instead of appending it on to the end of the object it as a function. The documentation and demo pages have been updated to use this new option. You can read more about the responsive feature by reading the responsive configuration page.
Default: null
Methods
obj.get(name)
An accessor function that you can use to retrieve the values of properties.
obj.set(name, value)
An accessor that you can use to set the values of properties.
obj.getShape(event)
This method makes it easy to get hold of which bar has been clicked on or hovered over. It returns an object which has the following indexes available:
object |
The chart object |
x |
The X coordinate for the bar that was clicked on. |
y |
The Y coordinate for the bar that was clicked on. |
width |
The width of the bar that was clicked on. |
height |
The height of the bar that was clicked on. |
dataset |
This is the numerical index that represents the relevant "row" of the
Gantt chart . The group in effect.
|
index |
This is the index in the group. If you only have one bar per row then this
will always be zero. If you have two bars in a row then the getShape
function will return zero for the first bar and one for the second bar.
|
sequentialIndex |
The sequential index of the bar. This number can be used to find the relevant tooltip for example. |
tooltip |
If a tooltip is associated with this bar this will be it. id
strings are expanded for you (where the tooltip text is retrieved from the html
tag with the matching ID).
|
<script> gantt.canvas.onclick = function (e) { RGraph.redraw(); var canvas = e.target, obj = canvas.__object__, shape = obj.getShape(e); if (shape) { var x = shape.x, y = shape.y, width = shape.width, height = shape.height; obj.path( 'b r % % % % s black f red', x, y, width, height ); } } </script>
obj.getXCoord(value)
This method can be used to get an appropriate X coordinate for a value
when you're doing custom drawing on the chart. It
returns null
if the value is out of range.
obj.getValue(mixed)
This method can be used to get the value when the chart has been clicked on. The argument is the event object. You can also use this method outside of an event listener by giving the function an array as the argument containing the X/Y coordinates.
obj.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
obj.on(event, function)
This method can be used to set an event listener on an object. It
operates similarly to the jquery
on
function.
The first argument is the event that you wish to attach to and the second
is the handler function. For example:
.on('draw', function (obj)
{
// Put your event code here
});
obj.exec(function)
The exec function is documented here.
obj.responsive(configuration)
The responsive
function helps your charts
respond to different browser window sizes and screen
resolutions. For example, for smaller screens, you
might want to have angled labels or show shorter
versions of them completely.
Update: There is now the responsive configuration option available to you and this is now the preferred method of configuration.
The responsive function and configuration option are documented on their own page here.
Adding events (the information represented on the chart) to your Gantt chart
To add events (the information represented on the chart), you now specify them as an argument to the constructor - it's no longer the events property.
myGantt = new RGraph.Gantt({ id: 'cvs', data: [ {start: 31, duration: 28, complete: 75, label: 'Richard'}, {start: 12, duration: 28, complete: 67, label: 'Fred'}, {start: 59, duration: 14, complete: 0, label: 'Barney'}, {start: 59, duration: 21, complete: 5, label: 'Gloria'}, {start: 46, duration: 31, complete: 94, label: 'Paul'}] {start: 80, duration: 21, complete: 46, label: 'Harry'}, {start: 94, duration: 17, complete: 84, label: 'Shane'}, {start: 34, duration: 14, complete: 32, label: 'Barry'}, {start: 64, duration: 14, complete: 28, label: 'Cynthia', background: 'red', color: 'yellow'}, {start: 13, duration: 61, complete: 74, label: 'Graham'}, {start: 84, duration: 31, complete: 16, label: 'Paul'} ], options: { } );
The start
value is the (zero-indexed) start number relative to your
xaxisScaleMax
value. So if you have set your
xaxisScaleMax
to 62, (to represent
two months), and this value is 31, the start will be the start of the
second month. In this case, you could give two labels -
['July', 'August']
.
The duration
value is the duration. So using the previous example,
if you set this to 7, you would have an event lasting a week.
The complete
value is the "percentage complete" indicator. This is
shown to the right of the event and is optional - you can
specify null
if you wish.
The label
value is the label that is used on the left-hand-side.
The optional background
value stipulates the background color
that the bar is. The default is white.
The optional color
value is the foreground color of the bar.
This defaults to #0c0
.
The optional border
value is the border color, defaulting to black
And the optional linewidth
value is the numerical linewidth
of the
border. The default for this is 1.
Adding vertical and horizontal bars to your Gantt chart
You can add decorative vertical or horizontal bars like so:
... vbars: [ [0, 31, 'rgba(192,255,192,0.5)'], [59, 31, 'rgba(192,255,192,0.5)'], [120, 31, 'rgba(192,255,192,0.5)'], [181, 31, 'rgba(192,255,192,0.5)'], [243, 30, 'rgba(192,255,192,0.5)'], [304, 30, 'rgba(192,255,192,0.5)'], ], hbars: [,'red',,,,'green'], ...
You can use these for decorative purposes, or to mark events/limits. For the vertical bars, the first value is the start index, the same as above. The second value is the unit length, again, the same as above. The third value is the color of the vertical bar.
And for the horizontal bars you can specify the color of the bar - they
automatically extend across the entire Gantt chart
area. If you don't
specify a color (as is demonstrated above) then there won't be a bar for
that entry.
Events
RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:
adjustbegin
This event fires at the start of adjusting - like the standardmousedown
event.adjust
This event fires (repeatedly) during adjusting - like the standardmousemove
event.adjustend
This event fires at the end of adjusting - like the standardmouseup
event.annotatebegin
This event fires at the start of annotating - like the standardmousedown
event.annotate
This event fires (repeatedly) during annotating - like the standardmousemove
event.annotateend
This event fires at the end of annotating - like the standardmouseup
event.annotateclear
This event fires at the end of theRGraph.clearAnnotations
function.beforeclear
This event fires at the start of theRGraph.clear
function.clear
This event fires at the end of theRGraph.clear
function.click
This is similar to the standardcanvas
click
event but this only fires when you click on a bar - not the wholecanvas
.beforecontextmenu
This event fires when you have the contextmenu enabled and it is about to appear.contextmenu
This event fires when you have the contextmenu enabled and it has been displayed.beforedraw
This event fires at the start of thedraw
method before anything has been done.firstdraw
This event fires at the end of thedraw
function - but only the first time that thedraw
function is called.draw
This event fires at the end of thedraw
function.mousemove
This event is similar to the standardmousemove
event but only fires when you move the mouse over a bar on the chart.mouseover
This event is similar to the standardmouseover
event but only fires when you move the mouse over a bar on the chart.mouseout
This event is similar to the standardmouseout
event but only fires when you move the mouse away from a bar on the chart that you've previously hovered over.beforetooltip
This event fires at the start of the tooltip showing process.tooltip
This event fires after a tooltip has been shown.
new RGraph.Gantt({ id: 'cvs', data: [ {start: 0, duration: 5, complete: null, label: 'Graham'}, {start: 5, duration: 5, complete: null, label: 'Paul'} ], options: { xaxisScaleMax: 10 } }).on('draw', function (obj) { console.log('The draw event has fired'); }).draw();
Effects
These effects are available and can be used instead of thedraw
function. There are also generic effects available which
you can see here:
Generic effects and transitions
- The
grow
effect (effects-gantt-grow.html
in the download archive
<script> // // Optional callback function that's called when the effect is complete // function myCallback (obj) { // ... } obj = new RGraph.Gantt({ id: 'cvs', data: [ {start: 0, duration: 30}, {start: 30, duration: 60}, {start: 60, duration: 90} ], options: { marginLeft: 35, xaxisScaleMax: 90 } }).grow({frames: 60}, myCallback) </script>