chrisburnell/spark-line
1
0
Fork 0
mirror of https://github.com/chrisburnell/spark-line.git synced 2026-01-08 18:33:21 +00:00
Code Issues Projects Releases Packages Wiki Activity
A Web Component to turn an array of integers into a fun little chart. https://chrisburnell.com/spark-line/
24 commits 1 branch 11 tags 81 KiB
Find a file
Exact
Chris Burnell 9b77e81b26
 Update README.md
2024-01-30 16:04:48 +00:00
.github add FUNDING 2021-11-26 12:55:21 +00:00
.vscode tidy up README; lint JS; bump version 2023-02-01 22:44:49 +00:00
.editorconfig tidy up README; lint JS; bump version 2023-02-01 22:44:49 +00:00
.eslintrc.json tidy up README; lint JS; bump version 2023-02-01 22:44:49 +00:00
.gitignore initial draft 2021-10-21 14:14:04 +01:00
.npmignore tidy up README; lint JS; bump version 2023-02-01 22:44:49 +00:00
.prettierrc use JS to grab the currentColor of spark-line for init 2022-05-14 13:42:29 +01:00
LICENSE initial draft 2021-10-21 14:14:04 +01:00
package-lock.json update packages + increment version 2023-09-06 19:06:39 +01:00
package.json update packages + increment version 2023-09-06 19:06:39 +01:00
README.md Update README.md 2024-01-30 16:04:48 +00:00
spark-line.js Ensure that spark line is still drawn if all values are 0 2023-09-06 15:15:35 +01:00

README.md

spark-line

Turn any array of integers into a fun little chart.

Check out <svg-sparkline> instead?

I probably won't be updating this very much anymore, as I've since built <svg-sparkline>, another Web Component for building sparklines but using SVG instead of Canvas!

It's been built with a lot more care, and I recommend you use it instead of <spark-line>.

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.