About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Gantt chart API reference

Example

A Gantt chart with tooltips
<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

Name: backgroundBarsCount
Description: 
The number of background bars.
Default: 5
Name: backgroundBarsColor1
Description: 
Color of the background bars.
Default: white
Name: backgroundBarsColor2
Description: 
Color of the background bars.
Default: white
Name: backgroundGrid
Description: 
Whether a grid is shown as part of the background.
Default: true
Name: backgroundGridColor
Description: 
The color of the background grid.
Default: #eee
Name: backgroundGridLinewidth
Description: 
The linewidth of the background grid.
Default: 1
Name: backgroundGridVlinesCount
Description: 
When using autofit this allows you to specify how many vertical gridlines you want.
Default: 20
Name: backgroundGridDotted
Description: 
If you want to have your background grid dashed then set this to true.
Default: false
Name: backgroundGridDashed
Description: 
If you want to have your background grid dotted then set this to true. This takes precedence over dashed lines.
Default: false
Name: backgroundVbars
Description: 
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)
Name: backgroundHbars
Description: 
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)
Name: backgroundColor
Description: 
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
Name: backgroundBorder
Description: 
You can use this property to specify that the chart area has a border around it.
Default: false
Name: backgroundBorderLinewidth
Description: 
The linewidth of the border that goes around the chart area.
Default: 1
Name: backgroundBorderColor
Description: 
The color of the border that goes around the chart area.
Default: #aaa
Name: backgroundBorderDashed
Description: 
Whether the border around the chart area is dashed or not.
Default: false
Name: backgroundBorderDotted
Description: 
Whether the border around the chart area is dotted or not.
Default: false
Name: backgroundBorderDashArray
Description: 
If the default dot or dash style is not to your liking you can use this property to specify your own style. It should be an array of two or more elements that specify the dashes and spaces - for example: backgroundBorderDashArray: [5,10],
Default: null

X-axis properties

Name: xaxis
Description: 
Set this to true if you want an x-axis.
Default: false
Name: xaxisScaleMax
Description: 
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
Name: xaxisScaleMin
Description: 
This option can sometimes make using a Gantt chart spread over several pages easier.
Default:  0
Name: xaxisPosition
Description: 
This determines where the x-axis labels are positioned.
Default: bottom
Name: xaxisLinewidth
Description: 
The linewidth used for the x-axis and the x-axis tickmarks (if they're displayed).
Default: 1
Name: xaxisColor
Description: 
The color of the x-axis (and its tickmarks.
Default: black
Name: xaxisTickmarks
Description: 
Whether the x-axis tickmarks are shown.
Default: true
Name: xaxisTickmarksLastLeft
Description: 
Whether the last tickmark on the left is displayed.
Default: null
Name: xaxisTickmarksLastRight
Description: 
Whether the last tickmark on the right is displayed.
Default: null
Name: xaxisTickmarksLength
Description: 
The length of the tickmarks.
Default: 3
Name: xaxisTickmarksCount
Description: 
The number of tickmarks that are shown on the x-axis.
Default: null
Name: xaxisLabels
Description: 
An array of the labels to be used on the chart.
Default: An empty array
Name: xaxisLabelsFont
Description: 
The font used to render the labels.
Default: null
Name: xaxisLabelsSize
Description: 
The size of the labels.
Default: null
Name: xaxisLabelsColor
Description: 
The color of the labels.
Default: null
Name: xaxisLabelsBold
Description: 
Whether the labels are bold or not.
Default: null
Name: xaxisLabelsItalic
Description: 
Whether the labels are italic or not.
Default: null
Name: xaxisLabelsOffsetx
Description: 
This allows you finer-grained control in the horizontal direction over the X label positioning if you need it.
Default:  0
Name: xaxisLabelsOffsety
Description: 
This allows you finer-grained control in the vertical direction over the X label positioning if you need it.
Default:  0
Name: xaxisLabelsHalign
Description: 
The horizontal alignment of the labels.
Default: center
Name: xaxisLabelsValign
Description: 
The vertical alignment of the labels.
Default: top
Name: xaxisLabelsAngle
Description: 
The angle of the x-axis labels. For example, you could set this to 45 to get angled labels.
Default: 0 (Horizontal)
Name: xaxisLabelsPosition
Description: 
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
Name: xaxisLabelsClass
Description: 
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]
Name: xaxisTitle
Description: 
This allows you to specify a title for the x-axis.
Default: none
Name: xaxisTitleSize
Description: 
This allows you to specify a size for the x-axis title.
Default: null
Name: xaxisTitleFont
Description: 
This allows you to specify a font for the x-axis title.
Default: null
Name: xaxisTitleBold
Description: 
This controls whether the x-axis title is bold or not.
Default: null
Name: xaxisTitleItalic
Description: 
This controls whether the x-axis title is italic or not.
Default: null
Name: xaxisTitleColor
Description: 
This controls the color of the x-axis title.
Default: null
Name: xaxisTitleX
Description: 
By giving this you can specifically set the X coordinate of the x-axis title.
Default: null
Name: xaxisTitleY
Description: 
By giving this you can specifically set the Y coordinate of the x-axis title.
Default: null
Name: xaxisTitleOffsetx
Description: 
The horizontal offset that's applied to the title.
Default:  0
Name: xaxisTitleOffsety
Description: 
The vertical offset that's applied to the title.
Default:  0
Name: xaxisTitleHalign
Description: 
The horizontal alignment of the title.
Default: center
Name: xaxisTitleValign
Description: 
The vertical alignment of the title.
Default: top
Name: xaxisTitlePos
Description: 
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

Name: yaxis
Description: 
Whether the y-axis is drawn.
Default: false
Name: yaxisLinewidth
Description: 
The linewidth of the y-axis.
Default: 1
Name: yaxisColor
Description: 
The color of the y-axis.
Default: black
Name: yaxisLabelsPosition
Description: 
This controls how the specific labels are positioned on the y-axis. It has no effect on a scale.
Default: section
Name: yaxisLabelsFont
Description: 
The font that's used by the y-axis labels.
Default: null
Name: yaxisLabelsSize
Description: 
The size of the y-axis labels.
Default: null
Name: yaxisLabelsColor
Description: 
The color of the y-axis labels.
Default: null
Name: yaxisLabelsBold
Description: 
Whether the y-axis labels are bold or not.
Default: null
Name: yaxisLabelsItalic
Description: 
Whether the y-axis labels are italic or not.
Default: null
Name: yaxisLabelsOffsetx
Description: 
This allows you finer-grained control in the horizontal direction over the Y label positioning if you need it.
Default:  0
Name: yaxisLabelsOffsety
Description: 
This allows you finer-grained control in the vertical direction over the Y label positioning if you need it.
Default:  0
Name: yaxisLabelsHalign
Description: 
The horizontal alignment of the y-axis labels.
Default: null
Name: yaxisLabelsValign
Description: 
The vertical alignment of the y-axis labels.
Default: null
Name: yaxisTitle
Description: 
This allows you to specify a title for the y-axis.
Default: none
Name: yaxisTitleSize
Description: 
This allows you to specify a size for the y-axis title.
Default: null
Name: yaxisTitleFont
Description: 
This allows you to specify a font for the y-axis title.
Default: null
Name: yaxisTitleBold
Description: 
This controls whether the y-axis title is bold or not.
Default: null
Name: yaxisTitleColor
Description: 
This controls what color the y-axis title is.
Default: null
Name: yaxisTitleItalic
Description: 
This controls whether the y-axis title is italic or not.
Default: null
Name: yaxisTitlePos
Description: 
This is multiplied with the margin to give the position of the y-axis title.
Default: 0.25
Name: yaxisTitleOffsetx
Description: 
The pixel offset that's added to the y-axis titles X coordinate.
Default:  0
Name: yaxisTitleOffsety
Description: 
The pixel offset that's added to the y-axis titles Y coordinate.
Default:  0
Name: yaxisTitleX
Description: 
By giving this you can specifically set the X position of the y-axis title.
Default: null
Name: yaxisTitleY
Description: 
By giving this you can specifically set the Y position of the y-axis title.
Default: null
Name: yaxisTitleHalign
Description: 
The horizontal alignment of the y-axis title.
Default:  0
Name: yaxisTitleValign
Description: 
The vertical alignment of the y-axis title.
Default:  0
Name: yaxisTitleAccessible
Description: 
With this property you can control whether the y-axis title is accessible or not.
Default: true

Color properties

Name: colorsDefault
Description: 
The default color of bars. If you don't specify a color for the event, this will be used.
Default: white

Margin properties

Name: marginLeft
Description: 
The left margin of the chart, (the margin is where the labels and title are)).
Default: 75
Name: marginRight
Description: 
The right margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginTop
Description: 
The top margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginBottom
Description: 
The bottom margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginInner
Description: 
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

Name: textAccessible
Description: 
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
Name: textAccessibleOverflow
Description: 
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
Name: textAccessiblePointerevents
Description: 
This controls whether the dom text responds to mouse-based events or not (it sets the pointer-events css property to none).
Default: false
Name: textSize
Description: 
The size of the text (in points).
Default: 12
Name: textFont
Description: 
The font used to render the text.
Default: Arial, Verdana, sans-serif
Name: textColor
Description: 
The color of the labels.
Default: black
Name: textBold
Description: 
Whether the text on the chart is bold or not.
Default: false
Name: textItalic
Description: 
Whether the text on the chart is italic or not.
Default: false
Name: labelsInbar
Description: 
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
Name: labelsInbarAlign
Description: 
This controls whether the labels are aligned left, center or right when the labels are drawn inside the bars.
Default: left
Name: labelsInbarBackground
Description: 
The background color for the text. By default, there's no background to the text.
Default: null
Name: labelsInbarColor
Description: 
The color of the labels.
Default: null
Name: labelsInbarFont
Description: 
The font used to draw the labels.
Default: null
Name: labelsInbarSize
Description: 
The size of the text labels.
Default: null
Name: labelsInbarBold
Description: 
Whether the inbar labels are bold or not.
Default: null
Name: labelsInbarItalic
Description: 
Whether the inbar labels are italic or not.
Default: null
Name: labelsInbarAbove
Description: 
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
Name: labelsInbarOffsetx
Description: 
This allows you finer-grained control in the horizontal direction over the text positioning if you need it.
Default:  0
Name: labelsInbarOffsety
Description: 
This allows you finer-grained control in the vertical direction over the text positioning if you need it.
Default:  0
Name: labelsComplete
Description: 
This allows you to turn off the "percent complete" indicator if you want to.
Default: true
Name: labelsCompleteFont
Description: 
The font used to render the percent-complete number.
Default: null
Name: labelsCompleteSize
Description: 
The size of the text.
Default: null
Name: labelsCompleteColor
Description: 
The color of the text.
Default: null
Name: labelsCompleteBold
Description: 
Whether the text is bold or not.
Default: null
Name: labelsCompleteItalic
Description: 
Whether the text is italic or not.
Default: null
Name: labelsCompleteOffsetx
Description: 
This allows you finer-grained control in the horizontal direction over the text positioning if you need it.
Default:  0
Name: labelsCompleteOffsety
Description: 
This allows you finer-grained control in the vertical direction over the text positioning if you need it.
Default:  0
Name: text
Description: 
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

Name: title
Description: 
The title of the chart, if any.
Default: null
Name: titleFont
Description: 
The font that the title is rendered in. If not specified the textFont setting is used (usually Arial).
Default: null
Name: titleSize
Description: 
The size of the title. If not specified the size is usually 4pt bigger than the textSize setting.
Default: null
Name: titleBold
Description: 
Whether the title is bold or not.
Default: null
Name: titleItalic
Description: 
Whether the title is italic or not.
Default: null
Name: titleColor
Description: 
The color of the title.
Default: null
Name: titleX
Description: 
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
Name: titleY
Description: 
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
Name: titleHalign
Description: 
The horizontal alignment of the title.
Default: center (can change depending on other options)
Name: titleValign
Description: 
The vertical alignment of the title.
Default: center (can change depending on other options)
Name: titleOffsetx
Description: 
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
Name: titleOffsety
Description: 
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
Name: titleSubtitle
Description: 
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
Name: titleSubtitleSize
Description: 
The size of the font used to render the subtitle.
Default: null
Name: titleSubtitleColor
Description: 
The color of the subtitle.
Default: #aaa
Name: titleSubtitleFont
Description: 
The font used to render the subtitle.
Default: null
Name: titleSubtitleBold
Description: 
Whether the subtitle is bold or not.
Default: null
Name: titleSubtitleItalic
Description: 
Whether the subtitle is italic or not.
Default: null
Name: titleSubtitleOffsetx
Description: 
Use this property to adjust the horizontal position of the subtitle.
Default:  0
Name: titleSubtitleOffsety
Description: 
Use this property to adjust the vertical position of the subtitle.
Default:  0

Interactive features properties

Name: tooltips
Description: 
An array of tooltips that are shown when the bars are clicked. They can contain html.
Default: (An empty array)
Name: tooltipsEvent
Description: 
This is the event that triggers the tooltips. It can be either click or mousemove.
Default: onclick
Name: tooltipsEffect
Description: 
The effect used for showing tooltips. Possible values are slide fade or none.
Default: slide
Name: tooltipsOverride
Description: 
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
Name: tooltipsFormattedPoint
Description: 
When using formatted tooltip strings this is used as the point when using the %{value_formatted} option.
Default: .
Name: tooltipsFormattedThousand
Description: 
When using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.
Default: ,
Name: tooltipsFormattedDecimals
Description: 
When using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.
Default:  0
Name: tooltipsFormattedUnitsPre
Description: 
When using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.
Default: (an empty string)
Name: tooltipsFormattedUnitsPost
Description: 
When using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.
Default: (an empty string)
Name: tooltipsFormattedListType
Description: 
With this property you can switch between an unordered list (the default) and an ordered list. Possible values are ul and ol.
Default: ul
Name: tooltipsFormattedListItems
Description: 
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
Name: tooltipsFormattedTableHeaders
Description: 
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
Name: tooltipsFormattedTableData
Description: 
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)
Name: tooltipsPointer
Description: 
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
Name: tooltipsPointerCss
Description: 
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
Name: tooltipsPointerOffsetx
Description: 
This allows you to adjust the vertical position of the tooltips pointer.
Default:  0
Name: tooltipsPointerOffsety
Description: 
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
Name: tooltipsPositionStatic
Description: 
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
Name: tooltipsCss
Description: 
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
Name: tooltipsCssClass
Description: 
This is the name of the css class the chart uses.
Default: RGraph_tooltip
Name: tooltipsOffsetx
Description: 
This property allows you to shift the tooltips left or right.
Default:  0
Name: tooltipsOffsety
Description: 
This property allows you to shift the tooltips up or down.
Default:  0
Name: tooltipsHotspotIgnore
Description: 
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 (ie true or false) 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 or false 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
Name: contextmenu
Description: 
An array of context menu items. Cannot be used in conjunction with tooltips.
Default: (An empty array)
Name: annotatable
Description: 
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false
Name: annotatableColor
Description: 
If you do not allow the use of the palette, then this will be the only color allowed for annotations.
Default: black
Name: annotatableLinewidth
Description: 
This is the linewidth of the annotations.
Default: 1
Name: adjustable
Description: 
Defaulting to false, this determines whether your Gantt chart will be adjustable.
Default: false
Name: adjustableOnly
Description: 
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

Name: highlightStyle
Description: 
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
Name: highlightStroke
Description: 
If you use tooltips, this controls the color of the highlight stroke.
Default: black
Name: highlightFill
Description: 
If you use tooltips, this controls the color of the highlight fill.
Default: rgba(255,255,255,0.5)
Name: borders
Description: 
Whether a border is shown on the event bars.
Default: true
Name: clearto
Description: 
This is used in animations and effects as the default color to use when the canvas is cleared.
Default: null
Name: responsive
Description: 
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
Name: corners
Description: 
This option controls whether the corners of the bars are round or square. To use rounded corners set this to round
Default: square
Name: cornersRoundRadius
Description: 
This option allows you to increase or decrease the severity of the rounding of the corners of the bars. There's a demo of a Gantt chart which uses rounding to good effect in the download archive called gantt-dark.html
Default: 25


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:

For example:
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 the draw function. There are also generic effects available which you can see here: Generic effects and transitions
<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>