Line

The <Line/> component is used inside <SparklinesComposed/> to render a line series.

Usage

import { SparklinesComposed, Line } from "@lueton/react-sparklines";

const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];

<SparklinesComposed data={data}>
  <Line />
</SparklinesComposed>

Curved Lines

Use the curved prop to render smooth curves instead of straight lines.

<SparklinesComposed data={data}>
  <Line curved />
</SparklinesComposed>

// Control the curve tension with a number
<SparklinesComposed data={data}>
  <Line curved={0.6} />
</SparklinesComposed>

Custom Styling

<SparklinesComposed data={data}>
  <Line stroke="#047857" fill="#047857" strokeWidth={3} />
</SparklinesComposed>

Dots

Display data point indicators using the dots prop.

// Simple dots
<SparklinesComposed data={data}>
  <Line dots />
</SparklinesComposed>

// Styled dots
<SparklinesComposed data={data}>
  <Line dots={{ style: { fill: "#f59e0b" } }} />
</SparklinesComposed>

// Custom dot shape
<SparklinesComposed data={data}>
  <Line dots={(props) => <circle {...props} fill="#047857" r={6} />} />
</SparklinesComposed>

Active Dot

The activeDot prop controls the dot shown on hover when using a <Tooltip/>.

<SparklinesComposed data={data}>
  <Line activeDot={{ fill: "red", r: 6 }} />
  <Tooltip />
</SparklinesComposed>

Fill (Area)

Use the fill prop to render an area beneath the line.

<SparklinesComposed data={data}>
  <Line fill="#3b82f6" stroke="#3b82f6" />
</SparklinesComposed>

For the full list of properties, see the Line API.