A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The <RadarChart> element tag is used to create a radar chart in KoolChart, and the series element tag for the radar chart is <RadarSeries>.

There are two types of axes in the radar chart, Angular axis and Radial axis.

This sample radar chart is to show how to create a polygon shape with filling color to the series data.

  • Angular axis : The angular axis corresponds to the perimeter of the chart and takes values that are categories rather than numerics.
  • Radial axis : The radial axis corresponds to the radius of the chart.
<RadarChart type="polygon" startAngle="270" dataTipJsFunction="dataTipFunc" ... >
    <RadarSeries field="year2010" displayName="Yr 2010" >
function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values) {
  return "<font color='#CC3300'>User-defined tooltips</font><br/>seriesId:" + seriesId
    + "<br/><font color='#0000FF'>Current Data: </font>"
    + "<b>" + seriesName + "</b>" + "<br/>itemIndex:" + index
    + "<br/>data:" + data["catName"] + "<br/>values:" + values;


type The type attribute determines the shape of the chart. The valid values are "polygon", "circle", and the default value is "polygon".
startAngle The startAngle attribute determines the start angle for the first item of a data series. The default value is "0". ( 3 o'clock direction )
dataTipJsFunction The dataTipJsFunction attribute is used to set the user-defined JavaScript function to be used to display user-defined tooltips.


categoryField The categoryField attribute determines which field in the Data Object will be used as the value of the angular axis ( category ).


field The field attribute determines which field in the Data Object will be used as the value of the radal axis.
fillLineArea The fillLineArea attribute determines whether or not to fill color in the area covered by a data series. The default value is "true".

© 2017 KoolChart. All rights reserved.