Hi 👋,

First of all thank you very much for this awesome library, I like it a lot!

But I got a question: I'd like to fill the backrgound of my sparkline with a gradient, like so:

<svg
  width="300"
  height="60"
  stroke-width="3"
  style="fill: url(#fade)"
>
  <defs>
    <linearGradient id="fade" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="currentColor" />
      <stop offset="100%" stop-color="transparent" />
    </linearGradient>
  </defs>
</svg>

But this throws the following error, because sparkline tries to remove all children of the element first.

Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Do you have any idea how to prevent this error?

Thanks,
Christian

It seem that the option object only support the mouse events but not touch events. Is it better to support touch move / touch end event also?

I see the code calculates the maximum value and uses that when calculating the "y" when plotting a point. I suggest that the algorithm should also consider the minimum values as well, to keep negative values from going below the chart.

For example, [ -1, 0, 1] should show an increasing line starting at the bottom left going to the top right. In the current code, however, the line starts on the second point (0) and the first value is hidden.

Sparkline logarithmic.

sparkline works fine in Vue3 but vite is not happy with the lack of .d.ts file.
I have handcrafted a .d.ts file for the sparkline function:

//sparkline.d.ts in the dist folder
export  default function sparkline(svg_html_ref: any, data:any[], options?:any) : void;

In case where the data array are filled with all zeros, Expected Number error will occurred:

Error: <path> attribute d: Expected number, "M4 NaN L 4 NaN L 29…"

Base on looking at the source, the Y coord of each datapoint is determined by the max values of datapoints. If data arrays are all 0, then you will run into a divide by zero scenario resulting in the above error.

  // The maximum value. This is used to calculate the Y coord of
  // each sparkline datapoint.
  const max = Math.max(...values);

By adding this, sparkline interactionLayer can support responsive (% - based) sizes (css expanding the sparkline to fit a div, for instance).

var realWidth;

interactionLayer.addEventListener("mouseover", event => {
    realWidth = svg.clientWidth;
});

interactionLayer.addEventListener("mousemove", event => {
    const mouseX = (event.offsetX * width) / realWidth;
...

https://github.com/fnando/sparkline/blob/3008997512faff401da2c6a953fa600cd87de90b/src/sparkline.js#LL1-L3C2

a if(max===0) return height; might be useful at the top of this fn

Currently, the class names of the spot and the circle are hardcoded. The line and the fill do not have a class name.

In order to give clients easy and full control over styling their graphs, it might be an idea to make all these elements' class names configurable (with sensible defaults, i.e. BEM?).

In interactive mode, when hovering over the graph, a cursor can be rendered. When hovering over this cursor, the hover seems to unregister, making cursor and spot disappear. A possibly related issue is that cursor and spot don't appear when rendering an interactive and active/dynamic sparkline.

It seems the library currently determines the hover value based on the mouse position, by looking it up in the datapoints.

An alternative solution, which will fix these issues, is to divide the graph in invisible layers (akin to voronoi diagrams) that relate to certain value (i.e. in a data-value attribute) or set of values. This can still be combined with event data to give clients full control over what to do on hover.

I am passing in an array of values that range from 0.0 to 1.0 and represent the percentage of memory used in a small monitoring dashboard. It would be nice if we could set an option to set the maximum value (in my case 1.0) so that the values are rendered within that range and appear as a percentage fill rather than only fluctuating based on value

Hi, The sparklines work fine individually. But am facing few issues with respect to the tooltip for the sparklines.

#1. When I define the tooltip info in options & pass that(options) to create sparklines, the page loads fine, but the moment, I hover over the sparkline, the cursor & dot appear for a second & then the page crashes.

#2. When I comment out the tooltip section within "options", then the page loads fine & the cursor/dot appear & page doesn't crash, however, it removes the other SVG(.line) elements from the page & also the cursor is limited to the right side of the sparkline, as in it doesn't move along the sparklines. Attached scr. shot of this issue.

Use case: rendering a fixed set of time series data where you may be lacking some future data but need the graph to maintain a consistent width. E.g. here's a graph of today's data viewed at 2pm since future data in each interval isn't available and is null, it gets coerced to 0 on the y-axis:

That looks kind of ugly and possibly misleading. Here is the desired look of this graph where nulls don't get rendered but interval width is still maintained:

I accomplished that by simply adding this test on line 113:

if(value !== null){
    pathCoords += ` L ${x} ${y}`;
}

I didn't want to make a PR yet because I haven't had a chance to write any tests nor am I sure this is a use case you even want to support. Just thought I'd throw it out there as a suggestion.