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

npm install lchart

usage

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

test2

code: test2

test3

code: test2

test4

code: test2

data

data = [
    {
        name: "line's name", // for multi line's legend
        points: [{x:Number, y:Number}, ...],
        configs: {
            lineColor: "#E74C3C",
            pointFillColor: "#C0392B"
        }
    }
, {...}, ...]

configs

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<String>, 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...

}