@data-ui/radial-chart

@data-ui/radial-chart

demo at williaster.github.io/data-ui

Overview

This package exports declarative react <RadialChart />s implmented 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/scalethese 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

:exclamation:

Although pie :cake: and donut :doughnut: charts are frequently encountered, they are not the most effective visualization for conveying quatitative information. With that caveat, when used well they can effecvitely 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