Blog Help & Support Contact About Login

 Show Nav

JavaScript 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 "plot" object.

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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".)

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 "labels" array, 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".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.