We like to compare different things, but sometimes, the things that we want to compare differ in more than just one or two axes. Rather than displaying multiple graphs, we can amalgamate these different axes into one graph and use the spiderweb graph.
To get started, follow the ensuing instructions:
Define options for our basic chart, setting the
polar
property of the chart totrue
using the following code:var options = { chart: { polar: true, type: 'line' }, title: { text: 'Creating spiderweb graphs for comparison' } }
Label the axes of our graph by setting
xAxis.categories
, as shown in the following code:options= { // ... xAxis: { categories: ["Strength", "Speed", "Defense"], tickmarkPlacement: 'on' } };
Set
yAxis.gridLineInterpolation
topolygon
to make the chart less rounded, as shown in the following code:var options= { // ... yAxis: { gridLineInterpolation: 'polygon' } };
Define the data for our spiderweb graph as follows:
var options = { // ... series: [{ name: 'Fighter', data: [10, 1, 5], pointPlacement: 'on' }, { name: 'Rogue', data: [5, 10, 1], pointPlacement: 'on' }] };