Skip to content
D3plus

RadialBar

Creates a radial bar chart from an array of data: each row is a concentric track whose arc length shows its value, or, with discrete("angle"), a bar radiating out from an inner circle.

Basic example

Section titled “Basic example”

Each row is a concentric track, the largest value outermost, and its bar’s arc length shows its value along a 270° sweep. Every track’s label sits in the open quarter before its start, and the value ticks run around the outside.

Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.

Accessor for each row's value.

The sweep the chart spans, in degrees from startAngle. Defaults to 270 for tracks, leaving the quarter before the start for the track labels (past 330°, too little room is left, so the legend names the tracks instead), and 360 for the circular bar chart.

Share of each track (or each bar's slice of the circle) left as a gap between neighbors.

Half circle

Section titled “Half circle”

startAngle and maxAngle set the sweep — here a half circle, which the chart moves down to fill the space. A fixed domain reads every bar as progress toward 100, against explicit ticks.

The sweep the chart spans, in degrees from startAngle. Defaults to 270 for tracks, leaving the quarter before the start for the track labels (past 330°, too little room is left, so the legend names the tracks instead), and 360 for the circular bar chart.

Circular bar chart

Section titled “Circular bar chart”

discrete: "angle" gives every row an equal slice of the circle instead, with a bar rising from the inner circle whose length shows its value. Value rings mark the scale, and crowded labels turn along their spokes.

discrete

Which polar dimension holds the categories: "radius" (default) gives each row a concentric track whose arc length shows its value; "angle" gives each row an equal slice of the circle, with a bar whose length shows its value (a circular bar chart).

The radius of the empty center, in pixels, or a function of the outer radius.

Share of each track (or each bar's slice of the circle) left as a gap between neighbors.

Open circular bars

Section titled “Open circular bars”

A 300° sweep leaves a gap at the top, sort: null keeps the data’s order, and track: false drops the background tracks so the value rings show through.

The sweep the chart spans, in degrees from startAngle. Defaults to 270 for tracks, leaving the quarter before the start for the track labels (past 330°, too little room is left, so the legend names the tracks instead), and 360 for the circular bar chart.

Whether to draw a background track behind every bar.

Styled tracks

Section titled “Styled tracks”

trackPadding thins each track, innerRadius sizes the hollow center, and trackConfig paints the background tracks.

The radius of the empty center, in pixels, or a function of the outer radius.

Share of each track (or each bar's slice of the circle) left as a gap between neighbors.

Small multiples

Section titled “Small multiples”

facet draws one chart per year, side by side, each sorted by its own values. By default each panel’s ticks fit its own values, so every panel’s largest bar spans the sweep.

Splits the chart into small multiples: a grid of equally sized panels, one per distinct value of this data key or accessor, each drawing the chart for that value's rows. The panels share one legend, color scale, title, and timeline, color each series the same way, and hover, tooltips, and legend clicks apply across all of them. Pass false to draw a single chart. See facetConfig for the grid's layout and shared scales.

Shared value domain

Section titled “Shared value domain”

With facetConfig: {scales: "shared"}, every panel uses one value domain across all panels, so bars compare from panel to panel.

Splits the chart into small multiples: a grid of equally sized panels, one per distinct value of this data key or accessor, each drawing the chart for that value's rows. The panels share one legend, color scale, title, and timeline, color each series the same way, and hover, tooltips, and legend clicks apply across all of them. Pass false to draw a single chart. See facetConfig for the grid's layout and shared scales.

discrete

Which polar dimension holds the categories: "radius" (default) gives each row a concentric track whose arc length shows its value; "angle" gives each row an equal slice of the circle, with a bar whose length shows its value (a circular bar chart).

Full circle

Section titled “Full circle”

A sweep within 30° of a full circle leaves no room before the tracks’ start for their labels, so the legend names the tracks instead.

The sweep the chart spans, in degrees from startAngle. Defaults to 270 for tracks, leaving the quarter before the start for the track labels (past 330°, too little room is left, so the legend names the tracks instead), and 360 for the circular bar chart.

Configuration

import {RadialBar} from "@d3plus/core";

Extends Viz.

activefalse | function

The active callback function for highlighting shapes.

axisConfigobject

Styles the chrome like a Plot axis: gridConfig the value gridlines (spokes across the tracks, or the inner rings of the circular bar chart), barConfig its outer ring, and shapeConfig.labelConfig the track, tick, and category labels.

classNamestring | array.<string> | undefined

CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configd3plusconfig

Methods that correspond to the key/value pairs and returns this class.

datastring | array.&lt;datapoint&gt; | object

The primary data array used to draw the visualization. The value passed should be an Array of objects or a String representing a filepath or URL to be loaded. The following filetypes are supported: csv, tsv, txt, and json.

If your data URL needs specific headers to be set, an Object with a "url" and "headers" (or any other fetch request option) may also be passed. An Object with any other key is a data row, not a request.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final array of obejcts to be used as the primary data array. For example, some JSON APIs return the headers split from the data values to save bandwidth. These would need be joined using a custom formatter.

If you would like to specify certain configuration options based on the yet-to-be-loaded data, you can also return a full config object from the data formatter (including the new data array as a key in the object).

To re-fetch a URL on an interval and redraw when its data changes, set dataPollingInterval; each poll runs the same formatter.

Defaults to an empty array ([]).

discrete"radius" | "angle"Default "radius"

Which polar dimension holds the categories: "radius" (default) gives each row a concentric track whose arc length shows its value; "angle" gives each row an equal slice of the circle, with a bar whose length shows its value (a circular bar chart).

domain[number, number]

The [min, max] the bars span. Either end may be left undefined to come from the data, rounded out to nice numbers and including zero.

facetstring | false | function

Splits the chart into small multiples: a grid of equally sized panels, one per distinct value of this data key or accessor, each drawing the chart for that value's rows. The panels share one legend, color scale, title, and timeline, color each series the same way, and hover, tooltips, and legend clicks apply across all of them. Pass false to draw a single chart. See facetConfig for the grid's layout and shared scales.

facetConfigfacetconfig

Configuration for small multiples (see facet), merged into the current config: - columns / rows: the grid's shape. Chosen by default to make the panels as large as the chart's shape allows. - padding: the space between panels, in pixels (default 20). - sort: panel order — "ascending" (default), "descending", "data" (first appearance), a comparator over facet values, or an Array of values. - scales: "shared" (default) gives every panel of a chart with axes the same x/y domains; "independent" fits each panel to its own rows. Funnel defaults to "independent" (each panel sized to its own widest stage); "shared" sizes every panel against the widest stage across all panels. PolarArea and RadialBar default to "independent" (each panel's rings and ticks fit its own values); "shared" gives every panel the same value domain. - axes: with shared scales, "outer" (default) labels the axes only along the grid's left and bottom edges; "all" labels every panel. An object sets each axis on its own, as in {x: "all", y: "outer"}: every panel labels its x axis, only the left column labels its y axis, and the panels' plot areas line up. BumpChart defaults to "all", and Marimekko labels its categories on every panel and its 0–100% share axis only along the outer edge, even with independent scales. - title: a (value, data) => string function for each panel's title, or false to hide panel titles. - titleConfig: TextBox config for the panel titles (fontSize, fontWeight, fontColor, textAnchor, padding, …).

fontFamilystring | array.&lt;string&gt;

The font family used throughout the visualization.

groupBystring | function | array.&lt;string | function&gt;

Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.

highlightfalse | function

Persistently emphasizes the data points matching the given predicate: the matching marks keep their color while every other mark is de-emphasized to a neutral gray (the "emphasis" form — highlight one series, gray the rest). Unlike hover/active (transient, opacity-based), highlight is a standing state that survives pointer movement. Pass false to clear it.

hoverfalse | function

The hover callback function for highlighting shapes on mouseover.

innerRadiusnumber | functionDefault outer / 4

The radius of the empty center, in pixels, or a function of the outer radius.

legendboolean | functionDefault rowLegend

RadialBar hides the legend when each row is its own entry and the chart's labels already name it: the circular bar chart's category labels, or the track labels unless the sweep leaves them no room.

levelFormatfunction

Formats the circular bar chart's ring value labels.

levelLabelAnglenumberDefault 0

Direction of the circular bar chart's ring value labels, in degrees clockwise from 12 o'clock.

levelLabelConfigobjectDefault {}

Styles the circular bar chart's ring value labels.

levelLabelsbooleanDefault true

Whether the circular bar chart labels each value ring with its value.

levelsnumber | number[]Default 4

The circular bar chart's value rings: an approximate count, or an array of exact values.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

maxAnglenumber

The sweep the chart spans, in degrees from startAngle. Defaults to 270 for tracks, leaving the quarter before the start for the track labels (past 330°, too little room is left, so the legend names the tracks instead), and 360 for the circular bar chart.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

outerPaddingnumber | "auto"Default "auto"

Room (px) reserved around the circular bar chart for its category labels, or "auto".

padAngleunknownDefault 0

Angular gap between neighboring bars of the circular bar chart, in radians; overrides padPixel.

padPixelunknownDefault 0

Gap between neighboring bars of the circular bar chart, in pixels.

parentunknown

Parent config used by the wrapper.

renderfunction

Draws the visualization given the specified configuration.

rendererboolean | "svg" | "canvas"

Selects which @d3plus/render backend paints the visible output. "svg" = SvgRenderer (default), "canvas" = CanvasRenderer. Boolean arguments both normalize to "svg".

selectstring | htmlelement

The SVG container element as a d3 selector or DOM element. Defaults to undefined.

shapeConfigd3plusconfigDefault {stroke: () => chartBackground(viz), strokeWidth: 1}

Configuration object with key/value pairs applied as method calls on each shape.

sortfunction | nullDefault function

Orders the rows (outermost track, or first bar, first). Defaults to descending value; null keeps data order.

startAngleunknownDefault 0

Where the sweep starts, in degrees clockwise from 12 o'clock.

thresholdnumber | function

The threshold value for bucketing small data points together, as a share of the total. On a stacked Plot, the series whose summed value across every position is under that share of the whole chart's total merge into one series, stacked on top. A bucket needs at least two items, and its tooltips list them. Off (0) by default on Plot charts.

thresholdKeystring | function

Accessor for the value used in the threshold algorithm. A stacked Plot defaults to its stacked value.

tickFormatfunctionDefault function

Formats the value tick labels around the tracks. Defaults to the abbreviated number format.

ticksnumber | number[] | false

The value ticks around the tracks: a target count, an explicit array of values, or false for none. Counted ticks always include both ends.

timestring | false | function

Accessor function or string key for the time dimension of each data point.

timelineDefaultstring | date | array.&lt;string | date&gt;

The starting time or range for the timeline. Can be a single Date/String, or an Array of 2 values representing the min and max.

tooltipConfigtooltipconfigDefault {tbody: [polarValueRow(viz)]}

Configuration for the tooltip component.

totalstring | boolean | function

Accessor function or string key for the total value displayed in the visualization.

trackbooleanDefault true

Whether to draw a background track behind every bar.

trackConfigobjectDefault {fill: () => dialDefaults(viz).track}

Paints the background tracks: fill, opacity, stroke, strokeWidth.

trackPaddingnumberDefault 0.25

Share of each track (or each bar's slice of the circle) left as a gap between neighbors.

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.

valuestring | functionDefault "value"

Accessor for each row's value.