Dailychart.js
Dailychart.js is a tiny standalone SVG charting library to display daily graph of a stock market security. Try the demo.
Installation
The simplest way is to include the library file from CDN:
It's also possible to install the package as a dependency from NPM
npm install dailychart --save
then include the library into your project:
var Dailychart = ;
Usage
First, create a container for the chart and fill with data using attributes.
data-dailychart-values
(required) - comma-separated values for the chart.data-dailychart-close
- the value splits the chart on two areas (positive, negative) with its own colors.data-dailychart-length
- the total number of data points. Used to scale the chart along the horizontal axis. Ifdata-dailychart-values
has fewer points the remaining space will be empty. On the other hand, ifdata-dailychart-length
isn't defined the chart will fit the container.
Optionally apply CSS to the container.
Finally, create the chart for the element.
Dailychart;
The first parameter can be a HTML element, a list of HTML elements or a CSS selector string.
Configuration
The second parameter of the constructor is an object that contains the number of options to control the appearance of the chart.
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').
## License
Dailychart.js is available under the MIT License.