SVG Radar charts API reference
Documentation about the SVG Radar chart including information on all the options and methods that are available to you.
The code below produces a chart like this:
// Some data that is to be shown on the Pie chart. For multiple
// lines it can also be an array of arrays
var data = [
colors: ['black', 'red'],
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 are
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
would result in having 16 elements - one per point.
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:
object - The RGraph Radar chart object
dataset - The dataset that pertains to the point
index - The index of the point in the dataset
x - The actual X coordinate of the point
y - The actual Y coordinate of the point
cx - The center X coordinate of the point
cy - The center Y coordinate of the point
r - The radius away from the center point that the point is
angle - The angle used to get to the end point (the X and Y coordinates)
You can use these properties to control how the chart apears.
You can set them by including them in the options section of the
configuration as above.
Property Description Default centerx If required, you can position the Radar chart using this instead of the gutters. null centery If required, you can position the Radar chart using this instead of the gutters. null radius If required, you can size the Radar chart using this instead of the gutters. null Margins
Property Description Default gutterLeft The left gutter of the chart, (the gutter is where the labels and title are)). 35 gutterRight The right gutter of the chart, (the gutter is where the labels and title are). 35 gutterTop The top gutter of the chart, (the gutter is where the labels and title are). 35 gutterBottom The bottom gutter of the chart, (the gutter is where the labels and title are). 35 Background
Property Description Default backgroundGrid Whether the background "grid" is displayed or not. true backgroundGridColor The color of the background grid. #ddd backgroundGridRadialsCount The number of lines eminating from the center of the Radar chart outwards. null (linked to how many data points that you have) backgroundGridConcentricsCount The number of lines that go around the center of the radar chart. 5 backgroundGridLinewidth The linewidth that is used to draw the background grid. 1 backgroundGridPoly Whether the background grid uses polygon concentrics or circular based ones. true Colors
Property Description Default colors Colors to be used for the pie segments. ['red', 'black', 'orange', 'green', '#6ff', '#ccc', 'pink', 'orange', 'cyan', 'maroon', 'olive', 'teal'] filled Whether the Radar chart is filed or not. false filledOpacity The opacity of the fill in Radar charts 0.25 filledAccumulative If true that datasets will be stacked on top of each other. true Labels and text
Property Description Default textSize The size of the text. 12 textFont The font used to render the text. sans-serif textColor The color of the labels. black textItalic Whether the labels are italic or not. false textBold Whether the labels are bold or not. false labels An array of labels for the chart.  Shadow
Property Description Default shadow Whether or not the chart has a shadow or not. false shadowOffsetx The X offset of the shadow. 2 shadowOffsety The Y offset of the shadow. 2 shadowBlur The blurring of the shadow. 2 shadowOpacity The opacity of the shadow colour. 0.25 Title
Property Description Default title The title of the chart. (An empty string) titleX The specific X 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 titleY The specific Y 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 titleHalign The horizontal alignment of the title. center titleValign The vertical alignment of the title. bottom titleColor The color of the title. It defaults to be the same as the textColor property. null titleFont The font used to render the title. null titleSize The size of the font used to render the title. It defaults to be a little larger than the textSize property null titleBold Whether the title is bold or not. false titleItalic Whether the title is italic or not. false 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 gutterTop value. (An empty string) titleSubtitleX The specific X coordinate of the subtitle. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position. null titleSubtitleY The specific Y coordinate of the subtitle. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position. null titleSubtitleHalign The horizontal alignment of the subtitle. center titleSubtitleValign The vertical alignment of the subtitle. top titleSubtitleColor The color of the subtitle. #aaa titleSubtitleFont The font used to render the subtitle. null titleSubtitleSize The size of the font used to render the subtitle. It defaults to be the same as the textSize setting. null titleBold Whether the subtitle is bold or not. false titleSubtitleItalic Whether the subtitle is italic or not. false Key
Property Description Default key An array of the labels that appear on the key. null keyColors An array of colors to be shown on the key. If not specified then the colors option will be used instead. null keyTextBold Whether the key text is bold or not. false keyTextFont The font to use for the key text. If not specified it defaults to the textFont setting. null keyTextSize The size to use for the key text. If not specified then the textSize is used. null ketTextItalic Whether the key text is italic or not. false keyTextOffsetx The horizontal pixel offset of the key text (just the text). 0 keyTextOffsety The vertical pixel offset of the key text (just the text). -1 keyOffsetx The horizontal pixel offset of the entire key. 0 keyOffsety The horizontal pixel offset of the entire key. 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: rect, circle, triangle, line, dot, rectdot rect Tooltips
Property Description Default tooltips An array of tooltips for the chart. This array should NOT be multidimensional - even for stacked or grouped charts. null tooltipsOverride If required, this can be a function that totally handles the tooltip showing instead of the default RGraph tooltips. It should look like this: tooltipsOverride: function (obj, opt)
The // Show tooltip
} 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 tooltipsCssClass The CSS class thats applied to the tooltip DIV. RGraph_tooltip tooltipsEvent The event used for tooltips (either click or mousemove. click Highlight
Property Description Default highlightStroke The color of the stroke of the highlight. rgba(0,0,0,0) highlightFill The color of the fill of the highlight. rgba(255,255,255,0.7) highlightLinewidth The linewidth of the stroke of the highlight. 1 Scale
Property Description Default scaleVisible Whether the scale is displayed or not. true scaleUnitsPre The units which are PREPENDED to the numbers. (an empty string) scaleUnitsPost The units which are APPENDED to the numbers. (an empty string) scaleMin The minimum scale value. 0 scaleMax The maximum scale value null scalePoint The character to use as the decimal point. . scaleThousand The character to use as the thousand seperator. , scaleRound Whether to round the maximum scale value up. false scaleDecimals The number of decimal places to display. 0 scaleFormatter A function that handles all of the formatting of the value. The function should look like this:
function (obj, num)
} null scaleBold Whether the scale values are bold or not. This falls back to the textBold setting if left as null. null scaleItalic Whether the scale values are italic or not. This falls back to the textItalic setting if left as null. null scaleColor The color of the scale labels. This falls back to the textColor setting if left as null. null scaleSize The size of the scale labels. This falls back to the textSize setting if left as null. null scaleFont The font of the scale labels. This falls back to the textFont setting if left as null. null scaleLabelsCount The number of scale labels. 5 Tickmarks
Property Description Default tickmarks 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: circle filledcircle rect filledrect circle tickmarksLinewidth The linewidth used for the tickmarks. 1 tickmarksSize The overall size of the tickmarks. 6 tickmarksFill The fill color used for tickmarks (when in circle mode or rect mode.). white Other
Property Description Default linewidth The linewidth of the seperating lines. 1
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.
This function adds an event listener (such as onbeforedraw or
ondraw) to the chart object.
This function simply executes the function that you give it (there and
then - not on any particular event)