Line Chart

NbLineChart plots one or more numeric series along a shared X dimension, typically time or any ordered category.

<template>
  <NbLineChart title="Daily active users" :series="series" />
</template>

<script setup lang="ts">
const series = [
  {
    name: 'DAU',
    data: [
      { x: 'Mon', y: 1240 },
      { x: 'Tue', y: 1380 },
      { x: 'Wed', y: 1410 },
      { x: 'Thu', y: 1620 },
      { x: 'Fri', y: 1530 },
      { x: 'Sat', y: 1180 },
      { x: 'Sun', y: 1090 },
    ],
  },
]
</script>

Multiple series ​

Curve styles ​

Filled area ​

Toggle area to fill the region under each line, useful for cumulative metrics.

Data points ​

Toggle points to mark each data point with a circle.

Props ​

Notes ​

• The X dimension is treated as ordinal, points are spaced evenly along the X axis, regardless of the underlying value. Use the order of data to control point sequence.
• All series should share the same X-value sequence (the first series defines the X-axis labels).
• For cumulative / area mode, ensure your data is sorted ascending on X.