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.

Name	Type	Default	Description
dataset	Dataset	[]	Dataset to be displayed in the chart.
colors	string[] | Theme	'pastel'	Custom color arry for Bar Or choose from Theme. string[] must be hex color code.
option	Option	{}	Options for the chart.

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.