← Projects

<svg-sparkline>

A Web Component for building an SVG Sparkline.
There are 12 stargazers on GitHub and it has over 1,550 downloads on npm.

<svg-sparkline> is a native Web Component that builds a sparkline using SVGs in the element’s shadow root and includes a base set of styles to give it a decent appearance out of the box.

Usage Permalink ¶

You can begin using the <svg-sparkline> Web Component by including a <script> tag in your HTML and setting a values attribute containing comma-separated numbers to build into a sparkline:

<script type="module" src="svg-sparkline.js"></script>

<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9"></svg-sparkline>

To prevent <svg-sparkline> from appearing in browsers which either do not support Web Components or have JavaScript disabled, this small snippet of CSS will check if the element has been properly defined (to the browser’s understanding) and apply display: none; if not:

svg-sparkline:not(:defined) {
  display: none;
}

You may also want to set some dimensions ahead of time to your component to help prevent cumulative layout shift:

svg-sparkline {
  inline-size: 212px;
  block-size: 48px;

  &:is([start-label], [end-label]) {
    block-size: 78px;
  }
}

There are a number of ways to augment and customise the functionality of the Web Component by attaching attributes to <svg-sparkline>:

option	default value	description
`values`	Required	Controls the name of the data attribute that holds the name of the currently-selected theme.
`width`	`200`	Sets the width of the sparkline SVGs.
`height`	`36`	Sets the height of the sparkline SVGs.
`color`	`currentColor`	Sets the color of the sparkline lines (and endpoint if not set)
`curve`	`false`	When set to `true, will use bezier curves between points instead of straight lines`
`endpoint`	`true`	Controls whether or not to show an endpoint
`endpoint-color`	`color` attribute	Sets the color of the endpoint (if visible)
`endpoint-width`	`6`	Controls the width/diameter of the endpoint
`fill`	`false`	When set to `true`, will fill underneath the sparkline with a solid color
`gradient`	`false`	When set to `true`, will fill underneath the sparkline with a gradient going from the `gradient-color` to `transparent`
`gradient-color` / `fill-color`	`color` attribute	Sets the color of the gradient / fill underneath the sparkline
`line-width`	`2`	Controls the width of the stroke used to draw the sparkline
`start-label`	—	Adds a label that appears on the bottom left of the sparkline
`end-label`	—	Adds a label that appears on the bottom right of the sparkline
`animation-duration`	`1s`	Sets the duration of the animation for animated sparklines
`animation-delay`	`animation-duration` attribute + `1s`	Sets the delay before the animation for animated sparklines

There are also a handful of CSS variables that you can set which will override the default behaviour and appearance of the sparklines. This is useful if you want to set up some defaults to override all sparklines on your website:

:root {
  /* override the color of the line (and endpoint, if not set) */
  --svg-sparkline-color: red;

  /* override the color of the endpoint */
  --svg-sparkline-endpoint-color: rebeccapurple;

  /* override the color of the gradient/fill for sparklines with either */
  --svg-sparkline-gradient-color: coral;

  /* override the padding around the SVGs and start/end labels */
  --svg-sparkline-padding: 1rem;

  /* override the duration of the animation for animated sparklines */
  --svg-sparkline-animation-duration: 2s;

  /* override the delay before the animation for animated sparklines */
  --svg-sparkline-animation-delay: 2s;

  /* override the delay before drawing the sparkline */
  --svg-sparkline-animation-first-delay: 2s;

  /* override the delay before the endpoint and labels appear */
  --svg-sparkline-animation-second-delay: 2s;
}

43 Responses

18 Likes
11 Reposts
2 Social Replies
12 Stargazers

<svg-sparkline>

Usage Permalink ¶

Further Reading Permalink ¶

43 Responses