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 },
  ]}
/>

/toy-block-charts/

    Package Sidebar

    Install

    npm i toy-block-charts

    Weekly Downloads

    37

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    11

    Last publish

    Collaborators

    • motinados