Linear-chart-js NPM

Linear Chart JS

Installation

yarn add linear-chart-js

npm install linear-chart-js

then

import LinearChart from 'linear-chart-js';

Usage

Create canvas element on your HTML

<canvas id="target" width="500px" height="500px"></canvas>

then write script

new LinearChart(
 document.getElementById('target'),
 [1, 2, 3, 4, 5, 6, 7], // x values
 [2345, 3463, 2343, 2352], // y values
 {
    highlightIndex: 6,
    wayPointsCount: 10,
 }
);

options

option	type	default	description
`isGrid`	`boolean`	`true`	Show or Hide the background grid pattern
`lineColor`	`string`	`#a0e1e0`	Line color
`highlightIndex`	`string`	`undefined`	Set the index to highlight
`textColor`	`string`	`#626666`	Text color
`yTopValue`	`number`	`MaxY+MinY`	Maximum y value
`backgroundColor`	`string`	`#FCFCFC`	Background color
`canvasWidth`	`number`	`792`	Canvas width
`canvasHeight`	`number`	`312`	Canvas height
`gridXSize`	`number`	`33`	The width of one grid unit
`gridYSize`	`number`	`26`	The height of one grid unit
`gridStrokeColor`	`string`	`#a0e1e0`	The color of the background grid pattern stroke
`gridXValueJump`	`number`	`2`	The offset position of x value
`graphPointerHighlightColor`	`string`	`#219A95`	The color of highlighed pointer
`graphXValueTextColor`	`string`	`#8D9393`	The color of highlighed x value
`graphPointerColor`	`string`	`#2AC1BC`	Pointer color
`wayPointsCount`	`number`	`25`	The speed of chart animation