@data-ui/radial-chart

@data-ui/radial-chart

demo at williaster.github.io/data-ui

Overview

This package exports declarative react <RadialChart />s implemented with @vx which (for the time being) 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.

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

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

const colorScale = scaleOrdinal({ range: colors.categories });

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 }}
    >
      <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>
);

Roadmap

• more types of radial series
• interactions (eg tooltips)
• 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.

@data-ui packages

• @data-ui/xy-chart
• @data-ui/radial-chart
• @data-ui/data-table
• @data-ui/theme
• @data-ui/demo