TIP

For core principles, concept description, API and changelog, refer to the D3 chart.

Basic usage

import { Plot, RadialTree } from '@semcore/ui/d3-chart';
import { scaleLinear } from 'd3-scale';
import React from 'react';

import RadialMockData from './mock';

const Demo = () => {
  const width = 500;
  const height = 500;

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree color='chart-palette-order-9'>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <RadialTree.Title>Sleeping</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

const data = RadialMockData.Default;

export default Demo;

Multicolor and accessibility

Pass color in data to specify radians color. You also can enable patterns property to show different symbols for different values.

import { Plot, RadialTree } from '@semcore/ui/d3-chart';
import LikeM from '@semcore/ui/icon/Like/m';
import { scaleLinear } from 'd3-scale';
import React from 'react';

import RadialMockData from './mock';

const Demo = () => {
  const width = 500;
  const height = 500;

  return (
    <Plot
      data={data}
      scale={[scaleLinear(), scaleLinear()]}
      width={width}
      height={height}
      patterns
    >
      <RadialTree>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon tag={LikeM} />
        </RadialTree.Radian>
        <RadialTree.Title>Movies</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

const data = RadialMockData.MoviesWithPaletteColor;

export default Demo;

Custom svg in center

Any svg elements may be used in the center of radial tree.

import { Plot, RadialTree } from '@semcore/ui/d3-chart';
import { scaleLinear } from 'd3-scale';
import React from 'react';

import RadialMockData from './mock';

const Demo = () => {
  const width = 500;
  const height = 500;

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree centralMargin={85} color='blue-400'>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <circle r={60} cx={width / 2} cy={height / 2} fill='#008FF8' />
        <RadialTree.Title color='white'>Sleeping</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

const data = RadialMockData.Default;

export default Demo;

Multiline text

Multiline text implementation isn’t trivial in svg. Text on the leafs of tree is split into lines by \n symbol automatically. Text in the chart center should be split into lines manually.

import { Plot, RadialTree } from '@semcore/ui/d3-chart';
import { scaleLinear } from 'd3-scale';
import React from 'react';

import RadialMockData from './mock';

const Demo = () => {
  const width = 500;
  const height = 500;

  const textSize = 12;
  const lineHeight = textSize * 1.2;
  const textLines = ['Lorem ipsum', 'dolor', 'sit amet'];

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree color='chart-palette-order-9' textSize={textSize}>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <RadialTree.Title textSize={lineHeight} color='chart-palette-order-9'>
          {textLines.map((line, lineIndex) => (
            <tspan
              key={line}
              x={width / 2}
              y={height / 2 + (-(textLines.length - 1) / 2 + lineIndex) * lineHeight}
            >
              {line}
            </tspan>
          ))}
        </RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

const data = RadialMockData.MultilineText;

export default Demo;

Edge cases

• If there is no data – show an empty gray chart.

import { RadialTreeChartSkeleton } from '@semcore/ui/skeleton';
import React from 'react';

const Demo = () => {
  return <RadialTreeChartSkeleton />;
};

export default Demo;

• If data isn’t ready yet – show chart skeleton.

import { RadialTreeChartSkeleton } from '@semcore/ui/skeleton';
import React from 'react';

const Demo = () => {
  return <RadialTreeChartSkeleton />;
};

export default Demo;