N00b's Programming Machine

    @chrisburnell/spark-line

    1.2.4 • Public • Published

    spark-line

    Turn any array of integers into a fun little chart.

    Installation

    Usage

    Include spark-line.js in your page however you like (as-is, as part of a build script, etc.).

    Use <spark-line> in your HTML!

    <spark-line values="1,2,3,5,8,13,21"></spark-line>

    Element attributes:

    • values: comma-delimited string of integers (required)
    • line-width: defines the width/thickness of the line as an integer (default = 2)
    • curve: toggles applying curves (cardinal splines) to the line (default = true)
    • endpoint: toggles the display of a point at the end of the line (default = true)
    • color: defines the color of the line (default = currentColor)
    • endpoint-color: defines the color of the endpoint (defaults to whatever color is defined as)
    • points: supercedes endpoint; comma-delimited string of integers representing at which pairing values you want points to appear at; arrays of a length less than the length of the values array will be looped over according to values
    • colors: supercedes endpoint-color; comma-delimited string of integers representing the colour of the paired points; arrays of a length less than the length of the values array will be looped over according to values
    • start-label: creates a label before the chart
    • end-label: creates a label after the chart

    Examples and more

    I wrote more about spark-line and laid out some examples here: https://chrisburnell.com/spark-line/.

    Contributing

    Contributions of all kinds are welcome! Please submit an Issue on GitHub or get in touch with me if you’d like to do so.

    License

    This project is licensed under a CC0 license.

    Install

    npm i @chrisburnell/spark-line

    DownloadsWeekly Downloads

    144

    Version

    1.2.4

    License

    CC0

    Unpacked Size

    14.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • chrisburnell