/ux
Components/Charts/LineChart

LineChart

Charts

Multi-series line chart with tooltip and legend.

Multi-line trend chart. curveType controls interpolation (linear, monotone, step). withDots adds data point markers.

Usage

import { LineChart } from "nosible-ux"

const data = [
  { week: "W1", confidence: 82, volume: 140 },
  { week: "W2", confidence: 87, volume: 165 },
  { week: "W3", confidence: 79, volume: 130 },
]

export default function Example() {
  return (
    <LineChart
      data={data}
      dataKey="week"
      series={[{ name: "confidence" }, { name: "volume" }]}
      withLegend
      withTooltip
    />
  )
}

Examples

Step curve for discrete events

Props

Name TypeDefaultDescription
aria-label
string | undefined—Accessible label forwarded to the `role="img"` wrapper.
curveType
"step" | "linear" | "monotone" | undefined—Line interpolation style. Default: `"monotone"`.
data
Record<string, unknown>[]—Array of data objects keyed by `dataKey` + series names.
dataKey
string—Key used for the X-axis categories.
h
number | undefined—Container height in px. Default: `300`.
series
LineChartSeries[]—Series definitions — one line rendered per entry.
withDots
boolean | undefined—Show dot markers at every data point. Default: `false`.
withLegend
boolean | undefined—Legend below the chart. Default: `true`.
withTooltip
boolean | undefined—Branded tooltip on hover. Default: `true`.
withXAxis
boolean | undefined—Render the X-axis. Default: `true`.
withYAxis
boolean | undefined—Render the Y-axis. Default: `true`.
← All ComponentsGetting Started →