SVG charting library to display daily graph of a stock market security – Dailychart.js

Dailychart.js is a tiny standalone SVG charting library written in javascript to display daily graph of a stock market security.

Install plugin via NPM

Libraries

Include the library

var Dailychart = require('dailychart');

of include the file

<script src="https://www.iamrohit.in/svg-charting-library-display-daily-graph-stock-market-security-dailychart-js/./path/to/dailychart.js">script>

HTML

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

="chart"
     data-dailychart-values="12.94,13.0,12.98,13.02,13.0,13.0,12.95,12.85,13.04,13.13"
     data-dailychart-close="13.08"
     data-dailychart-length="78">
>

CSS

#chart {
  width: 80px;
  height: 30px;
}

javascript

Initialize the stock chart with default settings.

ar el = document.getElementById('chart');
new Dailychart(el, [options]);

You can also use list options to customize the plugins:

• width – Chart width. If not set it equals to container’s width.
• height – Chart height. If not set it equals to container’s height.
• lineWidth – Line width of the graph (default: 1).
• colorPositive – Color of the positive part of the graph (default: ‘#33AE45’).
• colorNegative – Color of the negative part of the graph (default: ‘#EB5757’).
• fillPositive – Fill color of the positive area (default: ”).
• fillNegative – Fill color of the negative area (default: ”).
• closeWidth – Width of the close line (default: 1).
• closeColor – Color of the close line (default: ‘#e0e0e0’).

See live demo and download source code.

This awesome script developed by dailychart, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Related