Linear Chart JS

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