Skip to content

Latest commit

 

History

History
77 lines (54 loc) · 2.63 KB

README.md

File metadata and controls

77 lines (54 loc) · 2.63 KB
Raw

Dailychart.js

npm Travis (.org)

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:

<script src='https://unpkg.com/dailychart/dist/dailychart.min.js'></script>

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 = require('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. If data-dailychart-values has fewer points the remaining space will be empty. On the other hand, if data-dailychart-length isn't defined the chart will fit the container.
<div id="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">
</div>

Optionally apply CSS to the container.

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

Finally, create the chart for the element.

Dailychart.create('#chart', { lineWidth: 2 });

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.