JavaScript Radar Chart Circle

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
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. To create a radar chart using KoolChart's JavaScript charting library, the <RadarChart> and <RadarSeries> elements must be set in Layout. There are two types of axes in a radar chart: <radialAxis>, <angularAxis> The <radialAxis> element represents a radial line from the center of the chart to the edge of the chart, which is a <LinearAxis> type. The <angularAxis> element represents a perimeter of the chart, which is a <CategoryAxis> type.
<radialAxis>
<LinearAxis id="rAxis"/>
</radialAxis>
<angularAxis>
<CategoryAxis id="aAxis" categoryField="catName" displayName="Category"/>
</angularAxis>

<radialAxisRenderers>
<Axis2DRenderer axis="{rAxis}" horizontal="true" visible="true" tickPlacement="outside" tickLength="4" />
...
</Axis2DRenderer>
<Axis2DRenderer axis="{rAxis}" horizontal="false" visible="true" tickPlacement="outside" tickLength="4" />
...
</Axis2DRenderer>
</radialAxisRenderers>
<angularAxisRenderers>
<AngularAxisRenderer axis="{aAxis}" />
</angularAxisRenderers>
In this JavaScript chart example, four <RadarSeries> elements are set within a <RadarChart> element, the type attribute of which is set to circle.
<RadarChart isSeriesOnAxis="true" type="circle" paddingTop="25" paddingBottom="25" showDataTips="true">
...
<series>
<RadarSeries field="year2010" displayName="2010" >
...
</RadarSeries>
<RadarSeries field="year2011" displayName="2011" >
...
</RadarSeries>
<RadarSeries field="year2012" displayName="2012" >
...
</RadarSeries>
<RadarSeries field="year2013" displayName="2013" >
...
</RadarSeries>
</series>
...
</RadarChart>