simply-chart

The simply-chart is a canvas chart lib without fancy style.It only create the chart with number tendency. It means the number from 0 to 100 and 0 to 1000 will be same in the simply-chart.

Installation

npm install --save simply-chart

Usage

import Chart from 'simply-chart';
 
const basicConifg = {
    base: {
        width: 200,
        height: 100,
        renderType: 'none',
        renderTime: 200 / 60,
        framePerSecond: 60,
    },
    attr: {
        lineWidth: 2,
    },
};
 
// line chart
const chart = new Chart.line({
    ...basicConifg,
    base: {
        dom: document.getElementById('test'),
        renderType: 'point',
    },
});
chart.update([1, 2.5, 3, 2.5, 1]).render();

Chart Support

The characteristics of simply-chart is simply, so it only support the simply chart syle now.

• line
• bar

API

• Chart.line(class Line)

  • constructor(conifg: IConfig)

  • methods:

    • update(data: number[]): Line update the data in chart.
    • render(): Line render chart.

  • Config:

    interface IConfig {
        base: BaseConfig;
        attr: LineConfig;
    }

• Chart.bar

  • constructor(conifg: IConfig)

  • methods:

    • update(data: number[]): Line update the data in chart.
    • render(): Line render chart.

  • Config:

    interface IConfig {
        base: BaseConfig;
        attr: BarConfig;
    }

• Config

  • BaseConfig

    key	type	default	explain
    dom	string(dom selector) | HTMLElement		canvas init dom.
    width?	nubmer	200	canvas width.
    height?	number	200	canvas height.
    renderType?	string(enums) ['none', 'total', 'point']	none	canvas animation type. none: no animation point: animation in point to point total: animation in total line.
    renderTime?	number	2	animation time.
    renderCurve?	string	ease-in-out	canvas animation bezier-curve. could be a string or point string. Etc: '.68,0 ,1, 1'.
    framePerSecond?	number	60	canvas animation frame in 1 second.

  • LineConfig

    key	type	default	explain
    color?	string	'blue'	line color
    lineWidth?	number	5	line width

  • BarConfig

    key	type	Default	explain
    barWdith?	number	computed width width and data number.	each bar width.
    barRadius?	number	5	border-radius at top.
    colors?	string[]	['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']	color for each bar,(The length must more than the data length)

    ​