Update README with documentation for new features

- Document gap support for null/NaN/Infinity values
- Add section for fillInvert style option (PR borisyankov#113)
- Add section for SparklinesInteractiveLayer component (PR borisyankov#119)
- Standardize all code examples with proper JSX syntax and function wrappers
- Improve formatting with bold property names

Author: claude

README.md

@@ -41,19 +41,19 @@ function MyComponent() {
 
 Sparklines component is a container with the following properties:
 
-data - the data set used to build the sparkline
+**data** - the data set used to build the sparkline. Invalid values (null, NaN, Infinity, undefined) are supported and will create gaps in the visualization.
 
-limit - optional, how many data points to display at once
+**limit** - optional, how many data points to display at once
 
-width, height - dimensions of the generated sparkline in the SVG viewbox.  This will be automatically scaled (i.e. responsive) inside the parent container by default.
+**width, height** - dimensions of the generated sparkline in the SVG viewbox.  This will be automatically scaled (i.e. responsive) inside the parent container by default.
 
-svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.
+**svgWidth, svgHeight** - If you want absolute dimensions instead of a responsive component set these attributes.
 
-[preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) - default: 'none', set this to modify how the sparkline should scale 
+**[preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)** - default: 'none', set this to modify how the sparkline should scale
 
-margin - optional, offset the chart
+**margin** - optional, offset the chart
 
-min, max - optional, bound the chart
+**min, max** - optional, bound the chart
 
 
 #### Basic Sparkline
@@ -95,42 +95,140 @@ function MyComponent() {
 ![](http://borisyankov.github.io/react-sparklines/img/spots.png)
 
 
-```
+```jsx
 import React from 'react';
 import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';
-...
-<Sparklines data={sampleData}>
-    <SparklinesLine style={{ fill: "none" }} />
-    <SparklinesSpots />
-</Sparklines>
+
+function MyComponent() {
+  const sampleData = [5, 10, 5, 20, 8, 15];
+  return (
+    <Sparklines data={sampleData}>
+      <SparklinesLine style={{ fill: "none" }} />
+      <SparklinesSpots />
+    </Sparklines>
+  );
+}
 ```
 
 #### Reference Line
 
 ![](http://borisyankov.github.io/react-sparklines/img/referenceline.png)
 
 
-```
+```jsx
 import React from 'react';
 import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
-...
-<Sparklines data={sampleData}>
-    <SparklinesLine />
-    <SparklinesReferenceLine type="mean" />
-</Sparklines>
+
+function MyComponent() {
+  const sampleData = [5, 10, 5, 20, 8, 15];
+  return (
+    <Sparklines data={sampleData}>
+      <SparklinesLine />
+      <SparklinesReferenceLine type="mean" />
+    </Sparklines>
+  );
+}
 ```
 
 #### Normal Band
 
 ![](http://borisyankov.github.io/react-sparklines/img/normalband.png)
 
 
-```
+```jsx
 import React from 'react';
 import { Sparklines, SparklinesLine, SparklinesNormalBand } from 'react-sparklines';
-...
-<Sparklines data={sampleData}>
-    <SparklinesLine style={{ fill: "none" }}/>
-    <SparklinesNormalBand />
-</Sparklines>
+
+function MyComponent() {
+  const sampleData = [5, 10, 5, 20, 8, 15];
+  return (
+    <Sparklines data={sampleData}>
+      <SparklinesLine style={{ fill: "none" }}/>
+      <SparklinesNormalBand />
+    </Sparklines>
+  );
+}
+```
+
+#### Inverted Fill
+
+You can invert the fill direction for line charts using the `fillInvert` style option:
+
+```jsx
+import React from 'react';
+import { Sparklines, SparklinesLine } from 'react-sparklines';
+
+function MyComponent() {
+  return (
+    <Sparklines data={[5, 10, 5, 20, 8, 15]}>
+      <SparklinesLine style={{ fillInvert: true }} color="blue" />
+    </Sparklines>
+  );
+}
+```
+
+#### Handling Gaps in Data
+
+Invalid values (null, NaN, Infinity, undefined) in your data will automatically create visual gaps in the sparkline:
+
+```jsx
+import React from 'react';
+import { Sparklines, SparklinesLine } from 'react-sparklines';
+
+function MyComponent() {
+  // Data with gaps
+  const dataWithGaps = [5, 10, null, 20, NaN, 15, 8];
+
+  return (
+    <Sparklines data={dataWithGaps}>
+      <SparklinesLine color="blue" />
+    </Sparklines>
+  );
+}
 ```
+
+This works with `SparklinesLine`, `SparklinesCurve`, and `SparklinesBars` components.
+
+#### Interactive Layer
+
+Add interactive hover and click functionality to your sparklines:
+
+```jsx
+import React, { useState } from 'react';
+import { Sparklines, SparklinesLine, SparklinesInteractiveLayer } from 'react-sparklines';
+
+function MyComponent() {
+  const [activePoint, setActivePoint] = useState(null);
+  const data = [5, 10, 5, 20, 8, 15];
+
+  const handleMouseMove = (dataValue, point, index, event) => {
+    setActivePoint({ value: dataValue, index });
+  };
+
+  const handleMouseLeave = () => {
+    setActivePoint(null);
+  };
+
+  const handleClick = (dataValue, point, index, event) => {
+    console.log('Clicked point:', dataValue, 'at index:', index);
+  };
+
+  return (
+    <div>
+      <Sparklines data={data}>
+        <SparklinesLine color="blue" />
+        <SparklinesInteractiveLayer
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          onClick={handleClick}
+        />
+      </Sparklines>
+      {activePoint && (
+        <div>Value: {activePoint.value}, Index: {activePoint.index}</div>
+      )}
+    </div>
+  );
+}
+```
+
+The interactive layer shows a red circle and dashed line at the active point position.