JavaScript Chart Library The Stock Market – dailyChart

dailyChart is a JavaScript chart library which uses SVG element to render a dynamic, fully configurable line chart/graph for the stock market.

How to use it:

Install the library via package manager.

# NPM
$ npm install dailychart --save

Or include the compiled and minified version of the dailyChart library at the bottom of the page.

<script src="dist/dailychart.min.js"></script>

Create a placeholder element for the stock chart and specify the data using the following data attributes:

• data-dailychart-values: points
• data-dailychart-close: the close value of the previous trading session
• data-dailychart-length: the number of points in the trading session

<div class="chart" id="chart-example" data-dailychart-values="1292.2,1292.0,1292.1,1291.8,1291.8,1292.1,1291.9,1291.6,1291.7,1291.7,1291.6,1291.8,1291.6,1291.7,1292.0,1291.6,1291.4,1291.2,1290.5,1290.5,1290.6,1290.5,1290.4,1289.8,1289.5,1290.0,1289.6,1289.7,1289.1,1288.8,1289,1289.2,1289.4,1289.7,1289.7,1289.6,1289.2,1290.1,1290.3,1290.5,1290.7,1292.3,1292.5,1291.7,1292.1,1292.1,1292.6,1292.7,1292.8,1292.7,1292.2,1291.7,1292.1,1292.1,1291.7,1291.2,1291.7,1291.9,1291.6,1292.1,1292.5,1293.6,1293.3,1293.8,1293.9,1293.5,1293.7,1293.6,1294.1,1295.0,1296.9,1297.0,1296.3,1296.5,1296.6,1296.6,1296.1,1296.4,1296.1,1296.5,1296.7,1296.0,1296.1,1296.7,1296.1,1296.1,1296.2,1296.0,1296.1,1295.9,1295.7,1296.0,1296.4" data-dailychart-close="1292.0" data-dailychart-length="93"></div>

Initialize the stock chart with default settings.

Dailychart.create('#chart-example');

Customize the appearances of the stock chart.

Dailychart.create('#chart-example',{
  width: undefined,
  height: undefined,
  lineWidth: 1,
  colorPositive: '#33AE45',
  colorNegative: '#EB5757',
  fillPositive: '',
  fillNegative: '',
  closeWidth: 1,
  closeColor: '#e0e0e0'
})

Changelog:

v1.3.1 (07/19/2019)

• added create method

v1.2.3 (07/15/2019)

• rewrite normalize and translate methods
• throw the error correctly