@teamapdan/weirdchart
TypeScript icon, indicating that this package has built-in type declarations

0.3.10 • Public • Published

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.

Package Sidebar

Install

npm i @teamapdan/weirdchart

Weekly Downloads

6

Version

0.3.10

License

ISC

Unpacked Size

88.5 kB

Total Files

67

Last publish

Collaborators

  • rkskekzzz