Skip to content

Latest commit

 

History

History
79 lines (67 loc) · 1.68 KB

treemap.md

File metadata and controls

79 lines (67 loc) · 1.68 KB
Raw

Treemap

treemap is a component to show treemaps. For more information about this type of visualization please read this article.

Note: currently only one-level treemaps are supported. No formatters and event handlers are available as well (to be implemented).

Usage

Import the treemap component:

import {Treemap} from 'react-vis';

Add the following code to your render function:

<Treemap
  title={'My New Treemap'}
  height={300}
  data={
    {
      title: '',
      opacity: 1,
      children: [
        {
          title: 'dogs',
          size: 100,
          opacity: 10,
          color: 1
        },
        {
          title: 'cats',
          size: 60,
          opacity: 15,
          color: 10
        }
      ]
    }
  }
  />

API Reference

width

Type: number
Width of the component.

height

Type: number
Height of the component.

padding

Type: number
The padding between cells the cells of the heatmap in pixels.

data

Type: Object
The data for the component. The data property is a tree-like structure.
Each point consists of following properties:

  • title
    Type: string
    The title to show inside the cell. Might be a string or a React component.
  • size
    Type: number
    The relative size of the cell.
  • opacity (optional)
    Type: number
    The value to visualize the opacity with.
  • color (optional)
    Type: number
    The value to visualize the color with.
  • children (optional)
    Type: Array
    The children for the leaf.

animation (optional)

Type: boolean|Object Please refer to Animation doc for more information.