Need help with cake-chart?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

alexkuz
426 Stars 54 Forks MIT License 28 Commits 5 Opened issues

Description

Interactive multi-layer pie chart

Services available

!
?

Need anything else?

Contributors list

# 38,566
JavaScr...
React
C
json-vi...
25 commits

cake-chart

Interactive multi-layer pie chart

Demo

Webpack Chart

Install

> npm i -S cake-chart

Simple Example

import CakeChart from 'cake-chart';

const TREE = { value: 100, label: 'SUM = 100', children: [{ value: 50, children: [{ value: 10 }, { value: 20 }] }, { value: 30 }, { value: 20 }] };

...

render () { return ( ); }

Advanced Example

Tree Navigation

CakeChart is a quite dumb component that renders provided tree, but doesn't navigate through it, so you have to implement that part yourself. Which is not hard though.

const TREE = { ... };

/* finds parent of the selected node - you can just store parent in the node itself, for example */ function findParentNode(node, child, parent = null) { if (node === child) return parent; for (let c of child.children || []) { const p = findParent(node, c, child); if (p) return p; } }

class InteractiveCakeChart extends React.Component { constructor(props) { super(props);

this.state = {
  selectedNode: TREE
}

}

render() { return ( ); }

handleClick = (node) => { if (node === this.state.selectedNode) { /* user clicked on the chart center - rendering parent node */ this.setState({ selectedNode: findParentNode(node, TREE) || TREE }); } else { this.setState({ selectedNode: node }); } } }

Customization

function getSliceProps(slice, props) {
  return { ...props, fill: (slice.level % 2) ? '#FF0000' : '#0000FF' };
}

function getLabel(slice, label) { return slice.level === 0 ? Value: ${slice.node.value} : label; }

function getLabelProps(slice, props) { return { ...props, style: { background: (slice.level % 2) ? '#FF0000' : '#0000FF' } }; }

class CustomizedCakeChart extends React.Component { render() { return ( ); } }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.