https://github.com/exsper/lchart
Streamlined and efficient line-chart tool designed to draw line charts for large amounts of data.
https://github.com/exsper/lchart
Last synced: 11 months ago
JSON representation
Streamlined and efficient line-chart tool designed to draw line charts for large amounts of data.
- Host: GitHub
- URL: https://github.com/exsper/lchart
- Owner: Exsper
- License: mit
- Created: 2020-11-01T11:22:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-27T08:16:06.000Z (over 5 years ago)
- Last Synced: 2025-07-10T15:45:04.509Z (11 months ago)
- Language: JavaScript
- Size: 227 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lchart
[](https://www.npmjs.com/package/lchart)
WARNING: Not compatible with versions below v0.1
Streamlined and efficient line-chart tool designed to draw line charts for large amounts of data.
## install
```javascript
npm install lchart
```
## usage
```javascript
const Chart = require("lchart");
const yourData = [
{
name: "line's name",
points: [{x:Number, y:Number}, ...],
configs: {
lineColor: "#E74C3C",
pointFillColor: "#C0392B"
}
}
, {...}, ...];
const configs = {Object}; // see ##configs
const chart = new Chart(yourData, configs);
const picUrl = chart.draw(); // base64 url like "data:image/png;base64,#picdata#"
```
## example
### test1
code: [test1](/doc/test1.js)
### test2
code: [test2](/doc/test2.js)
### test3
code: [test2](/doc/test3.js)
### test4
code: [test2](/doc/test4.js)
## data
```javascript
data = [
{
name: "line's name", // for multi line's legend
points: [{x:Number, y:Number}, ...],
configs: {
lineColor: "#E74C3C",
pointFillColor: "#C0392B"
}
}
, {...}, ...]
```
## configs
```javascript
configs = { // All can be omitted
padding: {
left, right, up, down // Number, padding of the main data chart
},
size: {
width, height // Number, pic size
},
font, // String, exp: "15px Georgia"
color: {
background, title, titleX, titleY, coordinate, grid // String
},
label: {
title, titleX, titleY, // String
divideX, divideY // Number, max number of coordinate marks
},
xDateMode, // Boolean, x-coordinate is date etc... divited evenly, point.x must be [1, 2, 3, ...] or [3, 5, 6, ...] etc...
xDateLabel // Array, when xDateMode = true, show xDateLabel at x-coordinate instead of x value, length must contains all data's point.x
// for example: line1 point.x [1, 2, 3, 4, 5] line2 point.x [2, 4, 6, 7, 8]
// xDateLabel should be like ["day1", "day2", "day3", "day4", "day5", "day6", "day7", "day8"] contains 1-8
// the reason that I don't use Date() directly is x-coordinate can be other things like team numbers, seasons, years...
}
```