@teamapdan/weirdchart NPM

WeirdChart

Styled Ratio Bar Chart for Dynamic Data made with Canvas API.

Quickstart

Install this library with peer dependencies:

npm i @teamapdan/weirdchart
yarn add @teamapdan/weirdchart
pnpm add @teamapdan/weirdchart

Then, import and use individual components:

import {RatioBarChart} from '@teamapdan/weirdchart';

<RatioBarChart dataset={...} />

Document

All component's width and height are 100% of parent element. So if you want to set width and height, you should set parent element's width and height. Or you can set with canvas props like this.

<RatioBarChart
  dataset={...}
  width={300}
  height={300}
/>

RatioBarChart

Useage

import React from 'react';
import { RatioBarChart } from '@teamapdan/weirdchart';

function App() {
  return (
    <div className="App" style={{ width: '300px' }}>
      <RatioBarChart
        dataset={[...]}
        option={...}
        {...props}
      />
    </div>
  );
}

Props

Also supports all standard <canvas> props.

Example

RatioBarChart

use Theme

<RatioBarChart
  dataset={[
    { name: 'A', value: 10 },
    { name: 'B', value: 0, color: '#ff0000' }, // you can set custom color for each bar
    { name: 'C', value: 30 },
    { name: 'D', value: 40 },
  ]}
  colors='dark'
  option={{
    animationSpeed: 0.5, // default 1
  }}
/>

use custom color

<RatioBarChart
  dataset={[
    { name: 'A', value: 10 },
    { name: 'B', value: 0 },
    { name: 'C', value: 30 },
    { name: 'D', value: 40 },
  ]}
  colors={['#ff0000', '#00ff00', '#0000ff', '#ffff00']}
/>

set startAnimation

<RatioBarChart
  dataset={[
	{ name: 'A', value: 10 },
	{ name: 'B', value: 0 },
	{ name: 'C', value: 30 },
	{ name: 'D', value: 40 },
  ]}
  colors={['#ff0000', '#00ff00', '#0000ff', '#ffff00']}
  option={
	startAnimation: 'fromEqual', // or 'fromZero',
  /**
   * function customTimingFunction(frameCount: number) {
   *  return frameCount / 100;
   * }
   */
  }
  animationTimanimationTimingFunctioning: customTimingFunction,
  }
/>