SVG Radar charts API reference
Documentation about the SVG Radar chart including information about all of the options and methods that are available to you.
The code below produces a chart like this:
// Some data that's to be shown on the Radar chart. For multiple
// lines it can also be an array of arrays
var data = [50,57,54,59,56];
//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.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
array 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 appears.
You can set them by including them in the options section of the
configuration as above.
Chart configuration properties
Property Description Default centerx If required, you can position the Radar chart using this instead of the margins. null centery If required, you can position the Radar chart using this instead of the margins. null radius If required, you can size the Radar chart using this instead of the margins. null Margin properties
Property Description Default marginLeft The left margin of the chart, (the margin is where the labels and title are)). 35 marginRight The right margin of the chart, (the margin is where the labels and title are). 35 marginTop The top margin of the chart, (the margin is where the labels and title are). 35 marginBottom The bottom margin of the chart, (the margin is where the labels and title are). 35 Background properties
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 emanating 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 concentric lines or circular based ones. true Color properties
Property Description Default colors Colors to be used for the Radar chart. ['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 properties
Property Description Default textSize The size of the text. 12 textFont The font used to render the text. Arial, Verdana, 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.  labelsSize The size of the text. null labelsFont The font used to render the text. null labelsColor The color of the labels. null labelsItalic Whether the labels are italic or not. null labelsBold Whether the labels are bold or not. null Shadow properties
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 color. 0.25 Title properties
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. null titleFont The font used to render the title. null titleSize The size of the font used to render the title. null titleBold Whether the title is bold or not. null titleItalic Whether the title is italic or not. 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
(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. null titleSubtitleBold Whether the subtitle is bold or not. null titleSubtitleItalic Whether the subtitle is italic or not. null Key properties
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 keyLabelsColor The color of the text in the key. null keyLabelsBold Whether the key text is bold or not. null keyLabelsFont The font to use for the key text. null keyLabelsSize The size to use for the key text. null ketLabelsItalic Whether the key text is italic or not. null keyLabelsOffsetx The horizontal pixel offset of the key text (just the text). 0 keyLabelsOffsety 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 Tooltip properties
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
null tooltipsCssClass The CSS class that's applied to the tooltip DIV. RGraph_tooltip tooltipsEvent The event used for tooltips (either
click Highlight properties
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 properties
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 separator. , 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. null scaleItalic Whether the scale values are italic or not. null scaleColor The color of the scale labels. null scaleSize The size of the scale labels. null scaleFont The font of the scale labels. null scaleLabelsCount The number of scale labels. 5 Tickmark properties
Property Description Default 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:
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
white Other properties
Property Description Default linewidth The linewidth of the separating 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
draw) to the chart object.
This function simply executes the function that you give it (there and
then - not on any particular event)