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

Contact

To contact the maintainers, please open an issue.

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

This project is licensed under the terms of the MIT license.