Radar Charts

Overview

A radar chart or radar graph displays data in a radial pattern. Also known as a spider chart or star chart, they are often used as a comparative tool and provide a unique option for data visualization due to their circular shape. Our radar charts can display data with line, area, rose/column, scatter, or mixed aspects. You can create stacked radar, small multiple radar, and even polar charts. Browse the ZingChart Gallery for more ideas on what can be achieved with this chart type.

Radar Chart Types

Get started by specifying your chart type. Add a type attribute to your chart object, and set the value to radar. With this chart type, you can create standard radar, polar, and small multiple radar charts.

Radar Chart

Our default standard radar chart is displayed below, shown with three data sets. This chart type has two scales: scale-v (the vertical axis that displays values) and scale-k (the circular axis that wraps around the chart and displays variables/factors). Both scale types are further discussed in the Scale Configuration section below.

Note: Your radar chart can be modified to display line, area, rose (column/bar), scatter, or mixed (any combination of the previous) aspects. You can also create stacked radar charts. See the Chart-Specific Properties section below.

https://app.zingsoft.com/demos/embed/LBEN1K2R
https://app.zingsoft.com/demos/embed/LBEN1K2R
{
  type: "radar",
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }, {
    values: [34, 0, 0, 30, 10]
  }]
}

Polar Chart

Polar charts appear similar to radars, but their data is displayed in relation to angles rather than variables. Specifically, this affects the circular outer scale, scale-k, where you'll need to specify your minimum, maximum, and step scale values with a values attribute, and then use the format attribute or labels array to display your desired scale labels. You can also add an aspect attribute and set the value to circle, which will change your chart from a star/spider to circle shape. See the polar chart example below.

Note: Make sure the number of values in your values array(s) matches the number of scale steps on scale-k. Otherwise, your chart will not properly display.

https://app.zingsoft.com/demos/embed/PPNBDXIX
https://app.zingsoft.com/demos/embed/PPNBDXIX
{
  type: "radar",
  plot: {
    aspect: "area"
  },
  'scale-v': {
    values: "0:100:25",
    labels: [ '', '', '', '', '' ],
    'ref-line': {
      'line-color': "none"
    },
    guide: {
      'line-style': "solid"
    }
  },
  'scale-k': {
    values: "0:330:30",
    format: "%v°",
    aspect: "circle", //To set the chart shape to circular.
    guide: {
      'line-style': "solid"
    }
  },
  series: [{
    values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28]
  }, {
    values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34]
  }, {
    values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100]
  }]
}

Small Multiple Radar Chart

Create a small multiple radars (also known as a trellis or lattice chart) using a graphset array. This chart type contains a series of smaller radar charts organized into a grid, and is useful for quickly comparing different data sets against the same variables or factors. Each chart is placed in its own object in the graphset array. You can specify where the chart is placed by using the height, width, x, and y attributes. See the Adding Additional Charts Tutorial for further information on small multiple charts.

https://app.zingsoft.com/demos/embed/OFY8F6RL
https://app.zingsoft.com/demos/embed/OFY8F6RL
{
  graphset: [{
    type: "radar",
    height: "50%",
    width: "25%",
    x: "0%",
    y: "0%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [59, 30, 65, 34, 40]
    }, {
      values: [76, 60, 11, 21, 99]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "25%",
    y: "0%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [19, 65, 81, 40, 60]
    }, {
      values: [6, 100, 21, 99, 19]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "50%",
    y: "0%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [65, 50, 40, 34, 12]
    }, {
      values: [11, 56, 31, 34, 48]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "75%",
    y: "0%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [84, 47, 28, 34, 74]
    }, {
      values: [65, 48, 27, 64, 38]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "0%",
    y: "50%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [40, 59, 39, 31, 34]
    }, {
      values: [49, 76, 60, 11, 51]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "25%",
    y: "50%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [29, 81, 42, 48, 62]
    }, {
      values: [56, 59, 48, 34, 30]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "50%",
    y: "50%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [81, 34, 50, 62, 29]
    }, {
      values: [15, 48, 34, 30, 19]
    }]
  }, {
    type: "radar",
    height: "50%",
    width: "25%",
    x: "75%",
    y: "50%",
    plot: {
      aspect: "area"
    },
    'scale-v': {
      values: "0:100:100"
    },
    series: [{
      values: [42, 70, 62, 29, 81]
    }, {
      values: [48, 34, 30, 56, 15]
    }]
  }]
}

Series Data

Radars support single or multiple data sets, all contained inside the series array. For each data set, provide your values in a values array:

series: [
  { values: [v0, v1, v2, ..., vN]},
  { values: [v0, v1, v2, ..., vN]},
  { values: [v0, v1, v2, ..., vN]}
]

Chart-Specific Properties

ZingChart allows you to customize the appearance of your radar chart by changing its aspects so that data displays as lines, polygons, columns/bars, scatter markers, or a combination of aspects. You can also place data sets on top of each other to create a stacked radar chart or change its shape from star/spider to circle, which is especially useful when creating a polar chart.

Aspect

The aspect attribute allows you to change the appearance of your series data so that they appear as lines (default), polygons (area), columns/bars (rose), scatter markers, or a combination of any of the aspect options. Place the attribute in your plotobject.

Line Radar Chart

The default aspect for radars is line. Similar to line charts, the data points are represented by markers connected by straight lines.

https://app.zingsoft.com/demos/embed/EFCCPL2K
https://app.zingsoft.com/demos/embed/EFCCPL2K
{
  type: "radar",
  plot: {
    aspect: "line"
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }]
}

Area Radar Chart

Create area radars with the area aspect value. Your data will appear as polygons and, like area charts, the data points are connected by straight lines and with the area between them and the center shaded and filled in.

https://app.zingsoft.com/demos/embed/XI815Y5P
https://app.zingsoft.com/demos/embed/XI815Y5P
{
  type: "radar",
  plot: {
    aspect: "area"
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }]
}

Rose/Column Radar Chart

The rose (or column or bar) aspect value displays data as columns or bars (similar to column/bar charts). The chart's circular shape gives the bars a rose- or flower-like appearance, hence the name.

https://app.zingsoft.com/demos/embed/JGK03DKZ
https://app.zingsoft.com/demos/embed/JGK03DKZ
{
  type: "radar",
  plot: {
    aspect: "rose" //or "column" or "bar"
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }]
}

Scatter Radar Chart

Use the scatter aspect value to create a radar where the data points are represented by scatter markers. Like scatter charts, the markers can be modified and styled as discussed in the Styling section below.

https://app.zingsoft.com/demos/embed/EZMILKIQ
https://app.zingsoft.com/demos/embed/EZMILKIQ
{
  type: "radar",
  plot: {
    aspect: "scatter"
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }]
}

Mixed Radar Chart

With a mixed radar chart, you can use a combination of aspects (line, area, rose, scatter) in a single chart. Similar to mixed charts, start in the plot object. Add an aspect attribute, and set the value to mixed. Next, in each series object, add an aspect attribute and specify which value you want applied to that particular data set.

https://app.zingsoft.com/demos/embed/HI44R5OK
https://app.zingsoft.com/demos/embed/HI44R5OK
{
  type: "radar",
  plot: {
    aspect: "mixed"
  },
  series: [{
    values: [59, 30, 65, 34, 40],
    aspect: "area",
    marker: {
      visible: false
    }
  }, {
    values: [76, 60, 11, 21, 99],
    aspect: "rose"
  }]
}

Stacked Radar Chart

To create a stacked radar chart, add a stacked attribute to the plot object. Set the value to true. Stacking can be combined with any of the above radar chart aspects, but is probably most useful with the area and rose values.

https://app.zingsoft.com/demos/embed/NH0UIYQ1
https://app.zingsoft.com/demos/embed/NH0UIYQ1
{
  type: "radar",
  plot: {
    aspect: "rose",
    stacked: true //To create a stacked radar chart.
  },
  'scale-v': {
    values: "0:200:100"
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }, {
    values: [34, 0, 0, 30, 10]
  }]
}

scale-k Aspect

Our radar charts are star- or spider-shaped by default, but you can change it to a circular-shaped chart (which is especially useful when creating polar charts). Create a scale-k object, and add an aspect attribute. Set the value to circle. (The default value is star.)

https://app.zingsoft.com/demos/embed/WSTUZGTT
https://app.zingsoft.com/demos/embed/WSTUZGTT
{
  type: "radar",
  'scale-k': {
    aspect: "circle" //For "star" or "circle" chart shape.
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }, {
    values: [34, 0, 0, 30, 10]
  }]
}

Further Customization

Next, you'll want to configure your scales and customize the styling and appearance of your radar charts. You can also add value boxes, tooltips, and a legend.

Scale Configuration

Our radar charts have two scales: the key scale (scale-k object), which wraps around the chart, and the value scale (scale-v object), which is the vertical axis at the 12 o'clock position.

Key Scale ("scale-k")

The key scale, or scale-k object, is similar to the x-axis on an x/y-axis chart, but the scale is wrapped around the edges of the chart. With this scale, category labels are generally used. (For polar charts, you may use quantitative values.) Add a labelsarray, and provide your scale labels as strings and separated by commas. Use an item object to style your scale labels. Commonly used attributes include font-color, font-family, font-size, font-weight, and font-style. You can also style your tick marks and guides (both the lines and background colors) with the tick and guide objects. See the example radar chart below. And as previously discussed, the scale can appear as a star/spider shape or as a circle. Add an aspect attribute. Set the value to star (default) or circle. See the JSON Attributes/Syntax page for scale-k.

https://app.zingsoft.com/demos/embed/0M6R64QE
https://app.zingsoft.com/demos/embed/0M6R64QE
{
  type: "radar",
  plot: {
    aspect: "rose"
  },
  'scale-k': {
    labels: [ "Vitamin A", "Vitamin B", "Vitamin C", "Vitamin D", "Vitamin E" ], //Scale Labels
    item: { //To style your scale labels.
      'font-color': "orange",
      'font-family': "Georgia",
      'font-size': 12,
      'font-weight': "bold",
      'font-style': "italic"
    },
    tick: { //Tick Marks
      'line-color': "orange",
      'line-width': 3,
      size: 15,
      placement: "outer"
    },
    guide: { //Guides (both lines and background colors)
      'line-color': "red",
      'line-width': 1,
      'line-style': "solid",
      'background-color': "#f0f0f5 #e0e0eb"
    }
  },
  'scale-v': {
    visible: false
  },
  series: [{
    values: [59, 30, 65, 34, 40]
  }, {
    values: [76, 60, 11, 21, 99]
  }]
}

Value Scale ("scale-v")

The value scale, or scale-v object, is similar to the y-axis. Vertically aligned, it generally displays quantitative values. You can set its minimum, maximum, and step scale values with the values attribute. To format how those values appear (e.g., as percentages or currency), add the format attribute. Scale label styling is done inside the item object. Use attributes such as font-color, font-family, and font-size. This scale also has an axis line that you can style (e.g., line-color and line-width). Place the applicable attributes inside a ref-line object. Style your tick marks and guides (both lines and background colors) inside the tick and guide objects, respectively. See the JSON Attributes/Syntax page for scale-v.

https://app.zingsoft.com/demos/embed/AW43RA7M
https://app.zingsoft.com/demos/embed/AW43RA7M
{
  type: "radar",
  plot: {
    aspect: "rose"
  },
  'scale-v': {
    values: "0:100:25", //To set your min/max/step.
    format: "%v%", //To format your scale labels.
    item: { //To style your scale labels.
      'font-color': "orange",
      'font-family': "Georgia",
      'font-size':12,
      'font-weight': "bold",
      'font-style': "italic"
    },
    'ref-line': { //Axis Line
      'line-color': "red",
      'line-width':5
    },
    tick: { //Tick Marks
      'line-color': "orange",
      'line-width':3,
      size:15,
      placement: "cross"
    },
    guide: { //Guides (both lines and background colors)
      'line-color': "red",
      'line-width':1,
      'line-style': "dashdot",
      'background-color': "#f0f0f5 #e0e0eb"
    }
  },
  'scale-k': {
    visible: false
  },
  series: [
    { values: [59,30,65,34,40]},
    { values: [76,60,11,21,99]}
  ]
}

Styling

When styling your radar chart, the attributes you need depend on what aspect your chart is set to. The styling attributes most commonly used are line-color, background-color, and the marker object (with applicable attributes placed inside). Place the attributes in the plot object for global changes and in a specific series object for local changes.

Line Radar Chart

Like line charts, the same styling attributes apply when styling the lines in your radar chart. Use the line-color attribute to specify your line color. Use the marker object to style your markers, using attributes like type, background-color, and border-color.

https://app.zingsoft.com/demos/embed/1RAJW4NX
https://app.zingsoft.com/demos/embed/1RAJW4NX
{
  type: "radar",
  plot: {
    aspect: "line"
  },
  series: [
    {
      values: [59,30,65,34,40],
      'line-color': "#333399",
      marker: {
        type: "star5",
        'background-color': "white",
        'border-color': "#333399"
      }
    },
    {
      values: [76,60,11,21,99],
      'line-color': "#ff0066",
      marker: {
        type: "gear5",
        'background-color': "white",
        'border-color': "#ff0066"
      }
    },
    {
      values: [34,70,29,80,59],
      'line-color': "#ff5050",
      marker: {
        type: "square",
        'background-color': "white",
        'border-color': "#ff5050"
      }
    }
  ]
}

Area Radar Chart

The styling for area radar charts is similar to area charts. Style the lines with the line-color attribute and specify the color of the shaded region (the area between the lines and center, and what forms the polygon) with the background-color attribute.

https://app.zingsoft.com/demos/embed/5JJ8DPLO
https://app.zingsoft.com/demos/embed/5JJ8DPLO
{
  type: "radar",
  plot: {
    aspect: "area"
  },
  series: [
    {
      values: [59,30,65,34,40],
      'line-color': "#333399",
      'background-color': "#333399"
    },
    {
      values: [76,60,11,21,99],
      'line-color': "#ff0066",
      'background-color': "#ff0066"
    },
    {
      values: [34,70,29,80,59],
      'line-color': "#ff5050",
      'background-color': "#ff5050"
    }
  ]
}

Rose Radar Chart

Rose radar charts display data as columns that circle around to create a rose-like appearance. Similar to column and bar charts, the same styling attributes apply. Color the bars with the background-color attribute.

https://app.zingsoft.com/demos/embed/FEQCYONT
https://app.zingsoft.com/demos/embed/FEQCYONT
{
  type: "radar",
  plot: {
    aspect: "rose" //or "column" or "bar"
  },
  series: [
    {
      values: [59,30,65,34,40],
      'background-color': "#333399"
    },
    {
      values: [76,60,11,21,99],
      'background-color': "#ff0066"
    },
    {
      values: [34,70,29,80,59],
      'background-color': "#ff5050"
    }
  ]
}

Scatter Radar Chart

Scatter radar charts are styled just like the markers in scatter charts. Create a marker object, and place your styling attributes inside. You can change the shape of your markers with the type attribute and change the colors and borders with the background-color and border-color attributes.

https://app.zingsoft.com/demos/embed/A10OL0DL
https://app.zingsoft.com/demos/embed/A10OL0DL
{
  type: "radar",
  plot: {
    aspect: "scatter"
  },
  series: [
    {
      values: [59,30,65,34,40],
      marker: {
        type: "circle",
        'background-color': "#333399",
        'border-color': "#333399"
      }
    },
    {
      values: [76,60,11,21,99],
      marker: {
        type: "triangle",
        'background-color': "#ff0066",
        'border-color': "#ff0066"
      }
    },
    {
      values: [34,70,29,80,59],
      marker: {
        type: "square",
        'background-color': "#ff5050",
        'border-color': "#ff5050"
      }
    }
  ]
}

Mixed Radar Chart

Mixed radar charts are like mixed charts in that you can use two or more aspects in the same chart. Simply use the styling attributes that apply to the particular aspect in the applicable series object.

https://app.zingsoft.com/demos/embed/CTH3W5GW
https://app.zingsoft.com/demos/embed/CTH3W5GW
{
  type: "radar",
  plot: {
    aspect: "mixed"
  },
  series: [
    {
      values: [59,30,65,34,40],
      aspect: "area",
      'line-color': "#333399",
      'background-color': "#333399",
      marker: {
        type: "none"
      }
    },
    {
      values: [76,60,11,21,99],
      aspect: "rose",
      'line-color': "#ff0066",
      'background-color': "#ff0066",
      marker: {
        type: "none"
      }
    },
    {
      values: [34,70,29,80,59],
      aspect: "rose",
      'line-color': "#ff5050",
      'background-color': "#ff5050",
      marker: {
        type: "none"
      }
    }
  ]
}

Value Boxes

You can include value boxes in your radar chart. In the plot object, create a value-box object. Place all text specification and styling attributes inside. See the Value Boxes JSON Attributes/Syntax page for a full list of available attributes.

https://app.zingsoft.com/demos/embed/UQ1UPRR0
https://app.zingsoft.com/demos/embed/UQ1UPRR0
{
  type: "radar",
  plot: {
    aspect: "area",
    'value-box': { //Value Boxes
      'font-family': "Georgia",
      'font-weight': "normal"
    }
  },
  series: [
    { values: [59,30,65,34,40]},
    { values: [76,60,11,21,99]},
    { values: [34,70,29,80,59]}
  ]
}

Tooltips

Tooltips appear by default on our radars, but you can modify the text and incorporate styling. In the plot object, add a tooltip object. Use the text attribute to specify what text to display. You can use both text and tokens, contained in a string. See the Tooltips JSON Attributes/Syntax page for further attribute options.

https://app.zingsoft.com/demos/embed/OOXP0VAR
https://app.zingsoft.com/demos/embed/OOXP0VAR
{
  type: "radar",
  plot: {
    aspect: "line",
    tooltip: {
      text: "%t: %v"
    }
  },
  series: [
    {
      values: [59,30,65,34,40],
      text: "San Diego"
    },
    {
      values: [76,60,11,21,99],
      text: "Orange County"
    },
    {
      values: [34,70,29,80,59],
      text: "Los Angeles"
    }
  ]
}

Legend

Adding a legend to your radar can help users better understand your data and what each series object represents. In your chart object, add a legend object. Specify where the legend is placed by using the align (left, center, or right) and vertical-align (top, middle, or bottom) attributes. For more on legend styling, see the Legend Tutorial and Legend JSON Attributes/Syntax page.

https://app.zingsoft.com/demos/embed/E7XDHWJ4
https://app.zingsoft.com/demos/embed/E7XDHWJ4
{
  type: "radar",
  legend: {
    align: "center",
    'vertical-align': "bottom"
  },
  plot: {
    aspect: "rose",
    tooltip: {
      text: "%t: %v"
    }
  },
  series: [
    {
      values: [59,30,65,34,40],
      text: "San Diego"
    },
    {
      values: [76,60,11,21,99],
      text: "Orange County"
    },
    {
      values: [34,70,29,80,59],
      text: "Los Angeles"
    }
  ]
}

Summary

Got a question about how radar charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.