Charts

The Nubisco chart family provides a small, opinionated set of data-visualization primitives that share the design system's typography, color palette, and theming. Charts are rendered as inline SVG, support light and dark themes out of the box, and resize responsively to their container.

<template>
  <NbBarChart title="Quarterly revenue" :series="series" />
</template>

<script setup lang="ts">
const series = [
  {
    name: 'EU',
    data: [
      { x: 'Q1', y: 32 },
      { x: 'Q2', y: 41 },
      { x: 'Q3', y: 38 },
      { x: 'Q4', y: 47 },
    ],
  },
  {
    name: 'NA',
    data: [
      { x: 'Q1', y: 28 },
      { x: 'Q2', y: 33 },
      { x: 'Q3', y: 36 },
      { x: 'Q4', y: 44 },
    ],
  },
]
</script>

Available chart types ​

More chart types (Area, Radar, Bubble, Histogram, Heatmap, Tree, Network, Alluvial) are on the roadmap, see the Roadmap tab.

Shared API ​

Every chart component accepts the following common props so dashboards can be built without learning a new contract per chart:

Cartesian charts (NbBarChart, NbLineChart) accept a series: IChartSeries[] prop; categorical charts (NbPieChart) accept a data: ICategoricalDatum[] prop.

Theming ​

Charts paint through eight semantic role tokens, --nb-c-chart-1 to --nb-c-chart-8, which default to Nubisco ramps and follow the light / dark theme with no configuration. A white-label product redefines those eight on :root and every chart in the app follows, including ones nobody has written yet. They used to name the brand ramps directly, which meant an override could not reach them.

To colour one chart specifically, pass colors with any CSS color string, including raw hex, rgb, or your own custom properties.

Choosing between categorical, sequential and diverging scales, how many series colour can carry, the measured contrast and colour-vision numbers, and the full white-label recipe are on Chart Color.

<template>
  <NbLineChart
    :series="series"
    :colors="['var(--nb-c-info)', 'var(--nb-c-success)', '#f59e0b']"
  />
</template>

Series and data points ​

Cartesian charts consume an array of series, where each series is a named collection of points:

interface IChartPoint {
  x: number | string | Date
  y: number
  z?: number // optional third dimension (Bubble, Heatmap)
  label?: string // optional override for tooltip
}

interface IChartSeries {
  name: string
  data: IChartPoint[]
  color?: string
}

For categorical charts (Pie, future Donut/Treemap), use ICategoricalDatum:

interface ICategoricalDatum {
  label: string
  value: number
  color?: string
}

Sizing ​

Charts are 100 % width by default and use the height prop for vertical sizing. Internally, a ResizeObserver tracks the container so axis scales recompute on every resize, including responsive layout changes and dev-tools toggles.

For fixed-aspect dashboards, wrap the chart in a sized container:

<template>
  <div style="width: 320px;">
    <NbPieChart :data="data" :height="240" />
  </div>
</template>

Accessibility ​

Each chart sets an aria-label derived from its title (falling back to the chart type) and uses semantic SVG. Tooltips are render-only, they don't trap focus. Keyboard navigation across data points is on the roadmap.

Performance ​

For datasets above ~10k points per chart, expect to see render slowdowns, the current implementation renders every point as an SVG node. Canvas-backed rendering for high-density charts is planned alongside the histogram/heatmap work.

The chart family is being rolled out in phases. The current release ships the three foundational cartesian and categorical primitives, plus the shared scaffolding (legend, tooltip, palette, scales) that the rest of the family will build on.

The family taxonomy follows established data-visualization practice: one chart type per question, not per dataset.