@data-ui/radial-chart

A package for radial-axis visualizations https://williaster.github.io/data-ui

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
45725Feb 14, 2020Apr 11, 2017Minified + gzip package size for @data-ui/radial-chart in KB

Readme

@data-ui/radial-chart

demo at williaster.github.io/data-ui

Overview

This package exports declarative react <RadialChart />s implemented with @vx which can be used to render both donut and pie charts depending on props. As demonstrated in the demo, in combination with @vx/legend and @vx/scale these can be used to create re-usable radial charts.

Usage

See the demo at williaster.github.io/data-ui for more example outputs.

Donut chart
import { scaleOrdinal } from '@vx/scale';
import { LegendOrdinal } from '@vx/legend';

import { color as colors } from '@data-ui/theme';
import { RadialChart, ArcSeries, ArcLabel } from '@data-ui/radial-chart';

const colorScale = scaleOrdinal({ range: colors.categories });
const data = [{ label: 'a', value: 200 }, { label: 'c', value: 150 }, { label: 'c', value: 21 }];

export default () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <RadialChart
      ariaLabel="This is a radial-chart chart of..."
      width={width}
      height={height}
      margin={{ top, right, bottom, left }}
      renderTooltip={({ event, datum, data, fraction }) => (
        <div>
          <strong>{datum.label}</strong>
          {datum.value} ({(fraction * 100).toFixed(2)}%)
        </div>
      )}
    >
      <ArcSeries
        data={data}
        pieValue={d => d.value}
        fill={arc => colorScale(arc.data.label)}
        stroke="#fff"
        strokeWidth={1}
        label{arc => `${(arc.data.value).toFixed(1)}%`}
        labelComponent={<ArcLabel />}
        innerRadius={radius => 0.35 * radius}
        outerRadius={radius => 0.6 * radius}
        labelRadius={radius => 0.75 * radius}
      />
    </RadialChart>
    <LegendOrdinal
      direction="column"
      scale={colorScale}
      shape="rect"
      fill={({ datum }) => colorScale(datum)}
      labelFormat={label => label}
    />
  </div>
);

Tooltips

The easiest way to use tooltips out of the box is by passing a renderTooltip function to <RadialChart />. This function takes an object with the shape { event, datum, data, fraction } as input and should return the inner contents of the tooltip (not the tooltip container!) as shown above. If this function returns a falsy value, a tooltip will not be rendered.

Under the covers this will wrap the <RadialChart /> component in the exported <WithTooltip /> HOC, which wraps the svg in a <div /> and handles the positioning and rendering of an HTML-based tooltip with the contents returned by renderTooltip(). This tooltip is aware of the bounds of its container and should position itself "smartly".

If you'd like more customizability over tooltip rendering you can do either of the following:

  1. Roll your own tooltip positioning logic and pass onMouseMove and onMouseLeave functions to RadialChart. These functions are passed to the <ArcSeries /> children and are called with the signature onMouseMove({ datum, event }) and onMouseLeave() upon appropriate trigger.

  2. Wrap <RadialChart /> in <WithTooltip /> yourself, which accepts props for additional customization:

Name Type Default Description
children PropTypes.func or PropTypes.object - Child function (to call) or element (to clone) with onMouseMove, onMouseLeave, and tooltipData props/keys
className PropTypes.string - Class name to add to the <div> container wrapper
renderTooltip PropTypes.func.isRequired - Renders the contents of the tooltip, signature of ({ event, data, datum, fraction }) => node. If this function returns a falsy value, a tooltip will not be rendered.
styles PropTypes.object {} Styles to add to the <div> container wrapper
TooltipComponent PropTypes.func or PropTypes.object @vx's TooltipWithBounds Component (not instance) to use as the tooltip container component. It is passed top and left numbers for positioning
tooltipProps PropTypes.object - Props that are passed to TooltipComponent
tooltipTimeout PropTypes.number 200 Timeout in ms for the tooltip to hide upon calling onMouseLeave

Note that currently this is implemented with @vx/tooltips's withTooltip HOC, which adds an additional div wrapper.

Roadmap

  • more types of radial series
  • animations / transitions

NOTE ‼️

Although pie 🍰 and donut 🍩 charts are frequently encountered, they are not the most effective visualization for conveying quantitative information. With that caveat, when used well they can effectively give an overview of population makeup which is an entirely reasonable use of these charts. We don't recommend using >7 slices for user readability.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.