A radar-chart layer for dbox

d3, charts, dbox, radar
npm install @dboxjs/radar@0.0.3



A radar layer for dbox.


var visitors = [
  {"month": "Ene", "state": "Yucatán", "visitors": 121},
  {"month": "Feb", "state": "Yucatán", "visitors": 189},
  {"month": "Mar", "state": "Yucatán", "visitors": 123},
  {"month": "Abr", "state": "Yucatán", "visitors": 70},
  {"month": "May", "state": "Yucatán", "visitors": 40},
  {"month": "Ene", "state": "Quintana Roo", "visitors": 94},
  {"month": "Feb", "state": "Quintana Roo", "visitors": 125},
  {"month": "Mar", "state": "Quintana Roo", "visitors": 201},
  {"month": "Abr", "state": "Quintana Roo", "visitors": 229},
  {"month": "May", "state": "Quintana Roo", "visitors": 248},
  {"month": "Ene", "state": "Puebla", "visitors": 78},
  {"month": "Feb", "state": "Puebla", "visitors": 85},
  {"month": "Mar", "state": "Puebla", "visitors": 104},
  {"month": "Abr", "state": "Puebla", "visitors": 107},
  {"month": "May", "state": "Puebla", "visitors": 133},
  {"month": "Ene", "state": "San Luis Potosí", "visitors": 92},
  {"month": "Feb", "state": "San Luis Potosí", "visitors": 156},
  {"month": "Mar", "state": "San Luis Potosí", "visitors": 182},
  {"month": "Abr", "state": "San Luis Potosí", "visitors": 214},
  {"month": "May", "state": "San Luis Potosí", "visitors": 243}

var cfg = {
  bindTo: '#chart',
  size: {
    width: 800,
    height: 600,
    margin: {
      top: 40,
      bottom: 40,
      left: 30,
      right: 30
  data: {raw: visitors},
  legend: {
    enabled: true,
    at: {
      x: 600,
      y: 40
  axesFrom: 'month',
  polygonsFrom: 'state',
  valuesFrom: 'visitors',
  colors: ['red', 'yellow', 'green', 'blue'],
  ticks: 5,
  xAxis: {enabled: false},
  yAxis: {enabled: false},
  axisLabelMargin: 30

var chrt = dbox.chart(cfg)

Configuration options

Sample data:

  {"month": "Ene", "state": "Yucatán", "visitors": 421},
  {"month": "Feb", "state": "Yucatán", "visitors": 53},
  {"month": "Mar", "state": "Yucatán", "visitors": 28},
  {"month": "Ene", "state": "Quintana Roo", "visitors": 234},
  {"month": "Feb", "state": "Quintana Roo", "visitors": 198},
  {"month": "Mar", "state": "Quintana Roo", "visitors": 201},
  {"month": "Ene", "state": "Puebla", "visitors": 78},
  {"month": "Feb", "state": "Puebla", "visitors": 85},
  {"month": "Mar", "state": "Puebla", "visitors": 104},
  {"month": "Ene", "state": "San Luis Potosí", "visitors": 92},
  {"month": "Feb", "state": "San Luis Potosí", "visitors": 156},
  {"month": "Mar", "state": "San Luis Potosí ", "visitors": 182}


Default: {x: 20, y: 20}

Set the coordinates of the legend list. Set to an object with top and left properties indicating the position of the first legend, e.g., {x: 40, y: 30}.



What field to obtain the axes from, e.g., 'month'.



What field to use to group the data in the chart's polygons representation, e.g., 'state'.



The field where values are found, e.g., 'visitors'. This value is used to calculate the distance of the current record's point to the center of the chart.


Default: 10

Tell the underlying D3 scale how many ticks, i.e. circles, you prefer to be displayed (see d3-scale for more details).


Default: 400

Duration in milliseconds of the transitions of this chart. I you filter() then draw() an (already rendered) chart, this is the time the animation will take until getting to the chart's new visual state.


Default: 24

How far each label will be from it's axis.


Default: true

Determine whether to use the default styling in the chart. If set to false, this setting will disable almost all the chart's predefined styles.


dbox-radar defines as few styles as possible, so you can manipulate the aspect of the chart in a bunch of aspects. However, some styles such as the stroke color of the axes and ticks, or the font family of every text is written directly to the SVG elements in the chart. The good news is that you can deactivate these defaults by passing the defaultStyles configuration.

Use the following selectors to manipulate the style of the chart:

Selector Description
circle.tick The circular levels of the radar
line.axis The axes of the radar
text.axis-label The labels of the axes
text.tick-label The labels the ticks
circle.vertex The vertexes of the polygons in the chart
polygon.category The polygons in the chart
rect.tooltip-background The rect which acts as background for the tooltip
g.tooltip The tooltip container
g.legend-item The legend of the chart (one for each polygon)
g.polygon-container Each polygon and its vertexes are contained in an element like this
g.ticks-labels Ticks' labels are grouped in this single element
g.ticks Thicks circles are contained in this single element