line-charts-react

1.0.8 • Public • Published

line-charts-react

A simple React js component to create various line charts

Version 1.0.0 released! YAY!

To get it running you need to pass at least those two props:

Prop Type
sets Array of arrays of real numbers
times Array of arrays of timestamps

IMPORTANT You will need to use the bootstrap CSS to make it look pretty so include this (with the appropriate version) in your HTML file:

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">

Example:

<div className="card">
    <div className="card-body">
        <LineChart
            sets={[
                [1444, 350, 200],
                [1320, 1000, 400]
            ]}
            times={[
                ["2019-08-12T00:44:20.963Z", "2019-08-13T00:44:20.963Z",
                    "2019-08-14T00:44:20.963Z"].map((e) => new Date(e)),
                ["2019-08-11T00:44:20.963Z", "2019-08-12T00:44:20.963Z",
                    "2019-08-13T00:44:20.963Z"].map((e) => new Date(e)),
            ]}
        />
    </div>
</div>

Note that for every element of the set there must be a corresponding timestamp.

More details will be coming soon (when I get more free time :))

Package Sidebar

Install

npm i line-charts-react

Weekly Downloads

1

Version

1.0.8

License

MIT

Unpacked Size

8.56 MB

Total Files

29

Last publish

Collaborators

  • nanraptor