DataViz Tip #28: Chart Types: Radar and Polar Charts
Radar and Polar charts help you represent series of quantitative variables in a circular manner on axes starting from the same point. You can think of Radar chart as a radial version of a line chart, and Polar chart as a radial bar chart.
[codepen_embed height=”467″ theme_id=”24419″ slug_hash=”GdQZRV” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/GdQZRV/’>amCharts V4: Radar chart (1)</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Both chart types are at their best when variables in a series have some meaningful order. For example, when variables (spokes) represent minutes in an hour, hours in a 24 (or 12) hour cycle, months in a year, etc.
Additionally, radar charts are often used to compare features of multiple subjects. For example, you can show several core stats of multiple basketball players, characters or items (cars, guns) in a vide game etc. These could either be displayed on the same chart or as a series of multiple radar charts side-by-side in a panel.
New player comparison with focus on different #stats.Thanks to @mixedknuts for the radar charts.#BigData #football pic.twitter.com/7gebeSG4gM
— Global Soccer Network (@info_gsn) April 20, 2016
amCharts 4 support for Radar and Polar charts
You can create a multitude of Radar and Polar chart variants and plays on them with amCharts 4. Check out the documentation to get started and get deep with Radar charts.
These demos should get you a feel of what can be done with RadarChart type in amCharts 4:
[codepen_embed height=”680″ theme_id=”24419″ slug_hash=”zRVXBY” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/zRVXBY/’>amCharts V4: Radar timeline chart</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Try clicking on the continents, zooming in and out, dragging the timeline slider, etc.
[codepen_embed height=”571″ theme_id=”24419″ slug_hash=”ZoOyOz” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/ZoOyOz/’>amCharts V4: Radar chart with date-based axis</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
You can zoom-in by selecting a sector by dragging your mouse.
[codepen_embed height=”461″ theme_id=”24419″ slug_hash=”QrNzpG” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/QrNzpG/’>amCharts V4: Radar chart with switched axes</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
[codepen_embed height=”1046″ theme_id=”24419″ slug_hash=”pLrrEj” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/pLrrEj/’>amCharts V4: Stacked area radar chart</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Try interacting with the chart – zoom-in/out using sliders or mouse selection.
[codepen_embed height=”397″ theme_id=”24419″ slug_hash=”PQrgvx” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/PQrgvx/’>amCharts V4: Zoomable radar chart</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
[codepen_embed height=”418″ theme_id=”24419″ slug_hash=”zRVQYN” default_tab=”result” user=”amcharts”]See the Pen <a href=’https://codepen.io/team/amcharts/pen/zRVQYN/’>amCharts V4: Variable radius radar chart</a> by amCharts (<a href=’https://codepen.io/amcharts’>@amcharts</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
It doesn’t even have to be a full circle with amCharts 4, if that’s what you are after. Try using the slider at the bottom to change the radius of the whole chart from a full circle to a straight column chart.
We are giving away a great data visualization book each month! Subscribe to our newsletter to get monthly tips like the one above and you’ll be automatically entered in the sweepstakes to win an awesome book.