Linear Chart JS

Linear-Chart-JS

Simple Linear Chart using JavaScript and HTML5 Canvas.

Installation

yarn add linear-chart-js

or

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

69af5047c18dc7a8069e933738644274d835ce25