toy-block-charts
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

ToyBlockCharts

Introduction

Charts that looks like they were made out of toy blocks.
Please use it as an alternative if you find the expression of pie charts to be stiff.

This library is currently in the early stages of development. We are constantly working to improve and optimize our codebase, which may lead to some breaking changes. We recommend regularly checking the latest release logs and documentation.

Usage

Stable Balanced

stable balanced chart

<StackedBlockChart
  stackType="stable-balanced"
  data={[
    { name: "apple", value: 10 },
    { name: "banana", value: 20 },
    { name: "orange", value: 30 },
    { name: "grape", value: 40 },
    { name: "kiwi", value: 50 },
  ]}
/>

Unstable Inverted

unstable inverted chart

<StackedBlockChart
  stackType="unstable-inverted"
  data={[
    { name: "apple", value: 10 },
    { name: "banana", value: 20 },
    { name: "orange", value: 30 },
    { name: "grape", value: 40 },
    { name: "kiwi", value: 50 },
  ]}
/>

Shuffled

shuffled chart

<StackedBlockChart
  stackType="shuffled"
  data={[
    { name: "apple", value: 10 },
    { name: "banana", value: 20 },
    { name: "orange", value: 30 },
    { name: "grape", value: 40 },
    { name: "kiwi", value: 50 },
  ]}
/>

Readme

Keywords

Package Sidebar

Install

npm i toy-block-charts

Weekly Downloads

2

Version

0.2.0

License

MIT

Unpacked Size

116 kB

Total Files

11

Last publish

Collaborators

  • motinados