Radar chart

Example

View example on CodePen
<script>
    // Some data that's to be shown on the Radar chart. For multiple
    // lines it should be an array of arrays
    // data = [50,57,54,59,56];

    data = [
        [50,58,54,59,56],
        [90,84,86,98,86]
    ];

    new RGraph.SVG.Radar({
        id: 'chart-container',
        data: data,
        options: {
            colors: ['black', 'red'],
            tickmarksStyle: 'circle',
            tickmarksSize: 5,
            linewidth: 2,
            labels: ['John','Jay','June','Jocy','Joseph'],
            labelsBold: true,
            labelsItalic: true,
            labelsSize: 20,
            labelsOffset: 0,
            tooltips: '<i>Results for</i> <b>%{property:labels[%{index}]}</b><br />%{key}',
            tooltipsFormattedKeyLabels: ['Monday:','Tuesday:'],
            tooltipsFormattedUnitsPost:'%',
            tooltipsCss: {
                backgroundColor: '#333',
                fontWeight: 'bold',
                fontSize: '14pt',
                opacity: 0.85
            }
        }
    }).draw();
</script>

The angles (coordinates) properties

The details of the points on the Radar chart are held in two arrays called obj.angles and obj.angles2. The difference is how they're indexed. With the former, each point is appended to the array - so on a Radar chart with two datasets where each consists of eight points - the obj.angles array would result in having 16 elements - one per point.

The obj.angles2 array on the other hand is indexed by the relevant dataset - to which points are appended. So in the previous example, the angles2 array would have two elements - each of them being another array of eight elements (one per point). These elements are objects that consist of the following properties:

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.

Chart configuration properties

PropertyDescriptionDefault
centerxIf required, you can position the Radar chart using this instead of the margins.null
centeryIf required, you can position the Radar chart using this instead of the margins.null
radiusIf required, you can size the Radar chart using this instead of the margins.null
centerx
If required, you can position the Radar chart using this instead of the margins.
Default: null

centery
If required, you can position the Radar chart using this instead of the margins.
Default: null

radius
If required, you can size the Radar chart using this instead of the margins.
Default: null

Margin properties

PropertyDescriptionDefault
marginLeftThe left margin of the chart, (the margin is where the labels and title are)).35
marginRightThe right margin of the chart, (the margin is where the labels and title are).35
marginTopThe top margin of the chart, (the margin is where the labels and title are).35
marginBottomThe bottom margin of the chart, (the margin is where the labels and title are).35
marginLeft
The left margin of the chart, (the margin is where the labels and title are)).
Default: 35

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

Background properties

PropertyDescriptionDefault
backgroundGridWhether the background "grid" is displayed or not.true
backgroundGridColorThe color of the background grid.#ddd
backgroundGridRadialsCountThe number of lines emanating from the center of the Radar chart outwards.null (linked to how many data points that you have)
backgroundGridConcentricsCountThe number of lines that go around the center of the Radar chart.5
backgroundGridLinewidthThe linewidth that is used to draw the background grid.1
backgroundGridPolyWhether the background grid uses polygon concentric lines or circular-based ones.true
backgroundGrid
Whether the background "grid" is displayed or not.
Default: true

backgroundGridColor
The color of the background grid.
Default: #ddd

backgroundGridRadialsCount
The number of lines emanating from the center of the Radar chart outwards.
Default: null (linked to how many data points that you have)

backgroundGridConcentricsCount
The number of lines that go around the center of the Radar chart.
Default: 5

backgroundGridLinewidth
The linewidth that is used to draw the background grid.
Default: 1

backgroundGridPoly
Whether the background grid uses polygon concentric lines or circular-based ones.
Default: true

Color properties

PropertyDescriptionDefault
colorsColors to be used for the Radar chart.['red', 'black', 'orange', 'green', '#6ff', '#ccc', 'pink', 'orange', 'cyan', 'maroon', 'olive', 'teal']
filledWhether the Radar chart is filed or not.false
filledOpacityThe opacity of the fill in Radar charts.0.25
filledAccumulativeIf true then datasets will be stacked on top of each other.true
colors
Colors to be used for the Radar chart.
Default: ['red', 'black', 'orange', 'green', '#6ff', '#ccc', 'pink', 'orange', 'cyan', 'maroon', 'olive', 'teal']

filled
Whether the Radar chart is filed or not.
Default: false

filledOpacity
The opacity of the fill in Radar charts.
Default: 0.25

filledAccumulative
If true then datasets will be stacked on top of each other.
Default: true

Labels and text properties

PropertyDescriptionDefault
textSizeThe size of the text.12
textFontThe font used to render the text.Arial, Verdana, sans-serif
textColorThe color of the labels.black
textItalicWhether the labels are italic or not.false
textBoldWhether the labels are bold or not.false
textThis allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.null
labelsAn array of labels for the chart.[]
labelsSizeThe size of the text.null
labelsFontThe font used to render the text.null
labelsColorThe color of the labels.null
labelsItalicWhether the labels are italic or not.null
labelsBoldWhether the labels are bold or not.null
labelsOffsetIf you want to move the labels away from or towards the center then this is the property to use to do that. 0
labelsFormattedDecimalsWhen using formatted labels this is the number of decimals that are applied to the %{value_formatted} macro. 0
labelsFormattedPointWhen using formatted labels this is the decimal point character that's used with the %{value_formatted} macro..
labelsFormattedThousandWhen using formatted labels this is the thousand separator character that's used with the %{value_formatted} macro.,
labelsFormattedUnitsPreWhen using formatted labels these are the units that are prepended to the number with the %{value_formatted} macro.(an empty string)
labelsFormattedUnitsPostWhen using formatted labels these are the units that are appended to the number with the %{value_formatted} macro.(an empty string)
textSize
The size of the text.
Default: 12

textFont
The font used to render the text.
Default: Arial, Verdana, sans-serif

textColor
The color of the labels.
Default: black

textItalic
Whether the labels are italic or not.
Default: false

textBold
Whether the labels are bold or not.
Default: false

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

labels
An array of labels for the chart.
Default: []

labelsSize
The size of the text.
Default: null

labelsFont
The font used to render the text.
Default: null

labelsColor
The color of the labels.
Default: null

labelsItalic
Whether the labels are italic or not.
Default: null

labelsBold
Whether the labels are bold or not.
Default: null

labelsOffset
If you want to move the labels away from or towards the center then this is the property to use to do that.
Default: 0

labelsFormattedDecimals
When using formatted labels this is the number of decimals that are applied to the %{value_formatted} macro.
Default: 0

labelsFormattedPoint
When using formatted labels this is the decimal point character that's used with the %{value_formatted} macro.
Default: .

labelsFormattedThousand
When using formatted labels this is the thousand separator character that's used with the %{value_formatted} macro.
Default: ,

labelsFormattedUnitsPre
When using formatted labels these are the units that are prepended to the number with the %{value_formatted} macro.
Default: (an empty string)

labelsFormattedUnitsPost
When using formatted labels these are the units that are appended to the number with the %{value_formatted} macro.
Default: (an empty string)

Shadow properties

PropertyDescriptionDefault
shadowWhether or not the chart has a shadow or not.false
shadowOffsetxThe horizontal offset of the shadow.2
shadowOffsetyThe vertical offset of the shadow.2
shadowBlurThe blurring of the shadow.2
shadowColorThe color of the shadow.rgba(0,0,0,0.25)
shadow
Whether or not the chart has a shadow or not.
Default: false

shadowOffsetx
The horizontal offset of the shadow.
Default: 2

shadowOffsety
The vertical offset of the shadow.
Default: 2

shadowBlur
The blurring of the shadow.
Default: 2

shadowColor
The color of the shadow.
Default: rgba(0,0,0,0.25)

Title properties

PropertyDescriptionDefault
titleThe title of the chart.(An empty string)
titleXThe specific x-axis coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.null
titleYThe specific y-axis coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.null
titleOffsetxAn offset value that is added to the calculated x-axis coordinate. 0
titleOffsetyAn offset value that is added to the calculated y-axis coordinate. 0
titleHalignThe horizontal alignment of the title.center
titleColorThe color of the title.null
titleFontThe font used to render the title.null
titleSizeThe size of the font used to render the title.null
titleBoldWhether the title is bold or not.null
titleItalicWhether the title is italic or not.null
titleSubtitleThe 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.(An empty string)
titleSubtitleColorThe color of the subtitle.#aaa
titleSubtitleFontThe font used to render the subtitle.null
titleSubtitleSizeThe size of the font used to render the subtitle.null
titleSubtitleBoldWhether the subtitle is bold or not.null
titleSubtitleItalicWhether the subtitle is italic or not.null
title
The title of the chart.
Default: (An empty string)

titleX
The specific x-axis coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.
Default: null

titleY
The specific y-axis coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.
Default: null

titleOffsetx
An offset value that is added to the calculated x-axis coordinate.
Default: 0

titleOffsety
An offset value that is added to the calculated y-axis coordinate.
Default: 0

titleHalign
The horizontal alignment of the title.
Default: center

titleColor
The color of the title.
Default: null

titleFont
The font used to render the title.
Default: null

titleSize
The size of the font used to render the title.
Default: null

titleBold
Whether the title is bold or not.
Default: null

titleItalic
Whether the title is italic or not.
Default: null

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: (An empty string)

titleSubtitleColor
The color of the subtitle.
Default: #aaa

titleSubtitleFont
The font used to render the subtitle.
Default: null

titleSubtitleSize
The size of 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

Key properties

PropertyDescriptionDefault
keyAn array of the labels that appear on the key.null
keyColorsAn array of colors to be shown on the key. If not specified then the colors option will be used instead.null
keyLabelsColorThe color of the text in the key.null
keyLabelsBoldWhether the key text is bold or not.null
keyLabelsFontThe font to use for the key text.null
keyLabelsSizeThe size to use for the key text.null
ketLabelsItalicWhether the key text is italic or not.null
keyLabelsOffsetxThe horizontal pixel offset of the key text (just the text). 0
keyLabelsOffsetyThe vertical pixel offset of the key text (just the text).-1
keyOffsetxThe horizontal pixel offset of the entire key. 0
keyOffsetyThe horizontal pixel offset of the entire key. 0
keyColorShapeThis controls which shape should be displayed on the key. It can be a string or an array of strings. The possible options are: circle triangle line dot rectdotrect
key
An array of the labels that appear on the key.
Default: null

keyColors
An array of colors to be shown on the key. If not specified then the colors option will be used instead.
Default: null

keyLabelsColor
The color of the text in the key.
Default: null

keyLabelsBold
Whether the key text is bold or not.
Default: null

keyLabelsFont
The font to use for the key text.
Default: null

keyLabelsSize
The size to use for the key text.
Default: null

ketLabelsItalic
Whether the key text is italic or not.
Default: null

keyLabelsOffsetx
The horizontal pixel offset of the key text (just the text).
Default: 0

keyLabelsOffsety
The vertical pixel offset of the key text (just the text).
Default: -1

keyOffsetx
The horizontal pixel offset of the entire key.
Default: 0

keyOffsety
The horizontal pixel offset of the entire key.
Default: 0

keyColorShape
This controls which shape should be displayed on the key. It can be a string or an array of strings. The possible options are: circle triangle line dot rectdot
Default: rect

Tooltip properties

PropertyDescriptionDefault
tooltipsAn array of tooltips for the chart. This array should NOT be multidimensional - even for multiple dataset charts. You can also check the canvas tooltips documentation for more information.null
tooltipsOverrideThis can be a function that handles the tooltip showing instead of the default RGraph tooltips. It should look like this:
tooltipsOverride: function (obj, opt)
{
    // Show tooltip
}
The opt is an argument that contains these items:
  • object The chart object.
  • index The index of the element (that triggered the tooltip).
  • sequentialIndex The sequential index of the element that was clicked.
  • text The text to be used as the tooltip. Remember that this may contain html (or whatever else you may have specified).
  • event The event object (either a click or mousemove event).
null
tooltipsEventThe event used for tooltips (either click or mousemove.click
tooltipsFormattedPointWhen using formatted tooltip strings this is used as the point when using the %{value_formatted} option..
tooltipsFormattedThousandWhen using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.,
tooltipsFormattedDecimalsWhen using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option. 0
tooltipsFormattedUnitsPreWhen using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.(an empty string)
tooltipsFormattedUnitsPostWhen using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.(an empty string)
tooltipsFormattedKeyLabelsThe labels that are used in the formatted tooltip key.[] (an empty array)
tooltipsFormattedKeyColorsThe colors that are used in the formatted tooltip key. Normally these are automatically taken from the colors on the chart but can be specified differently using this property.null
tooltipsFormattedKeyColorsShapeThis is the shape that's used in the tooltip key. It can be square or circlesquare
tooltipsFormattedKeyColorsCss By using this property you can add css values to the key color shape that appears in the tooltip key. Note the property name is "color" and not "colors" like previous properties. It should be an object of css properties like this:
tooltipsFormattedKeyColorsCss : {
    border: "1px solid #ddd";
}
null
tooltipsFormattedListTypeWith this property you can switch between an unordered list (the default) and an ordered list. Possible values are ul and ol.ul
tooltipsFormattedListItemsThis should be a two-dimension 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
tooltipsFormattedTableHeadersWhen 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
tooltipsFormattedTableDataThis 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 in the canvas documentation, copy the code from it and then modify it suit. You'll create fewer bugs this way.null)
tooltipsPointerBy 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
tooltipsPointerCssIf you want any css values applied to the tooltips pointer (a css border, fo example) then specify an object containing those values to this property. For example:
tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}
null
tooltipsPositionStaticThe 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
tooltipsCssIf you want to specify some css that gets applied to all of the tooltips, but don't want to use the RGraph.SVG.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
tooltipsPointerOffsetxThis allows you to adjust the horizontal position of the tooltips pointer. 0
tooltipsPointerOffsetyThis allows you to adjust the vertical position of the tooltips pointer. 0
tooltipsCssClassThe css class that's applied to the tooltip div.RGraph_tooltip
tooltipsOffsetxThis property allows you to shift the tooltips left or right. 0
tooltipsOffsetyThis property allows you to shift the tooltips up or down. 0
tooltips
An array of tooltips for the chart. This array should NOT be multidimensional - even for multiple dataset charts. You can also check the canvas tooltips documentation for more information.
Default: null

tooltipsOverride
This can be a function that handles the tooltip showing instead of the default RGraph tooltips. It should look like this:
tooltipsOverride: function (obj, opt)
{
    // Show tooltip
}
The opt is an argument that contains these items:
Default: null

tooltipsEvent
The event used for tooltips (either click or mousemove.
Default: click

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)

tooltipsFormattedKeyLabels
The labels that are used in the formatted tooltip key.
Default: [] (an empty array)

tooltipsFormattedKeyColors
The colors that are used in the formatted tooltip key. Normally these are automatically taken from the colors on the chart but can be specified differently using this property.
Default: null

tooltipsFormattedKeyColorsShape
This is the shape that's used in the tooltip key. It can be square or circle
Default: square

tooltipsFormattedKeyColorsCss
By using this property you can add css values to the key color shape that appears in the tooltip key. Note the property name is "color" and not "colors" like previous properties. It should be an object of css properties like this:
tooltipsFormattedKeyColorsCss : {
    border: "1px solid #ddd";
}

Default: null

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-dimension 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 in the canvas documentation, 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 (a css border, fo example) then specify an object containing those values to this property. For example:
tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

Default: null

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.SVG.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

tooltipsPointerOffsetx
This allows you to adjust the horizontal position of the tooltips pointer.
Default: 0

tooltipsPointerOffsety
This allows you to adjust the vertical position of the tooltips pointer.
Default: 0

tooltipsCssClass
The css class that's applied to the tooltip div.
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

Highlight properties

PropertyDescriptionDefault
highlightStrokeThe color of the stroke of the highlight.rgba(0,0,0,0)
highlightFillThe color of the fill of the highlight.rgba(255,255,255,0.7)
highlightLinewidthThe linewidth of the stroke of the highlight.1
highlightStroke
The color of the stroke of the highlight.
Default: rgba(0,0,0,0)

highlightFill
The color of the fill of the highlight.
Default: rgba(255,255,255,0.7)

highlightLinewidth
The linewidth of the stroke of the highlight.
Default: 1

Scale properties

PropertyDescriptionDefault
scaleVisibleWhether the scale is displayed or not.true
scaleUnitsPreThe units that are prepended to the numbers.(an empty string)
scaleUnitsPostThe units that are appended to the numbers.(an empty string)
scaleMinThe minimum scale value. 0
scaleMaxThe maximum scale value.null
scalePointThe character to use as the decimal point..
scaleThousandThe character to use as the thousand separator.,
scaleRoundWhether to round the maximum scale value up.false
scaleDecimalsThe number of decimal places to display. 0
scaleFormatterA function that handles all of the formatting of the value. The function should look like this:
function (obj, num)
{
}
null
scaleBoldWhether the scale values are bold or not.null
scaleItalicWhether the scale values are italic or not.null
scaleColorThe color of the scale labels.null
scaleSizeThe size of the scale labels.null
scaleFontThe font of the scale labels.null
scaleLabelsCountThe number of scale labels.5
scaleVisible
Whether the scale is displayed or not.
Default: true

scaleUnitsPre
The units that are prepended to the numbers.
Default: (an empty string)

scaleUnitsPost
The units that are appended to the numbers.
Default: (an empty string)

scaleMin
The minimum scale value.
Default: 0

scaleMax
The maximum scale value.
Default: null

scalePoint
The character to use as the decimal point.
Default: .

scaleThousand
The character to use as the thousand separator.
Default: ,

scaleRound
Whether to round the maximum scale value up.
Default: false

scaleDecimals
The number of decimal places to display.
Default: 0

scaleFormatter
A function that handles all of the formatting of the value. The function should look like this:
function (obj, num)
{
}

Default: null

scaleBold
Whether the scale values are bold or not.
Default: null

scaleItalic
Whether the scale values are italic or not.
Default: null

scaleColor
The color of the scale labels.
Default: null

scaleSize
The size of the scale labels.
Default: null

scaleFont
The font of the scale labels.
Default: null

scaleLabelsCount
The number of scale labels.
Default: 5

Tickmark properties

PropertyDescriptionDefault
tickmarksStyleThe style of tickmarks that are used. You set this to false to disable tickmarks. This can be either a string or an array of tickmark styles:
  • circle
  • filledcircle
  • rect
  • filledrect
circle
tickmarksLinewidthThe linewidth used for the tickmarks.1
tickmarksSizeThe overall size of the tickmarks.6
tickmarksFillThe fill color used for tickmarks (when in circle mode or rect mode).white
tickmarksStyle
The style of tickmarks that are used. You set this to false to disable tickmarks. This can be either a string or an array of tickmark styles:
Default: circle

tickmarksLinewidth
The linewidth used for the tickmarks.
Default: 1

tickmarksSize
The overall size of the tickmarks.
Default: 6

tickmarksFill
The fill color used for tickmarks (when in circle mode or rect mode).
Default: white

Other properties

PropertyDescriptionDefault
linewidthThe linewidth of the separating lines.1
responsiveThis 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
linewidth
The linewidth of the separating lines.
Default: 1

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)

This can be used to get properties if necessary. It's normally used after the chart is drawn if you need to get parameters (if you're doing custom coding for example).

obj.set(name, value)

This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional parameters or change them.

obj.getRadius(value)

This can be used to get the radius for the given value.

obj.on(event, handler)

This function adds an event listener (such as beforedraw or draw) to the chart object. For example:

obj.on('draw', function (obj)
{
    // Put your code here
});
obj.exec(func)

This function can be used to execute a function (immediately). It's not event-based (ie it doesn't run when something happens) - it just runs immediately - and only once. You might use it when you need to get something from the chart when it's drawn and then call the redraw function. Because this function only runs once the RGraph.SVG.redraw function would not cause a loop - which would happen if you used the draw event.

obj.exec(function (obj)
{
    // Put your code 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.

Data properties that are used on the points

The svg elements that represent the points on the Radar chart have two data attributes added to them that hold information about the indexes of the point. These are:

These can be retrieved by using standard dom methods:

element.getAttribute('data-index');

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.SVG.Radar({
    id: 'chart-container',
    data: [4,8,6,3,5,8,9],
    options: {
    }
}).on('tooltip', function (obj)
{
    console.log('The draw event has fired');
    
}).draw();