nabs-ui-charts

Reusable 2D chart controls for the Nabs UI library.

Includes:

• TwoDChart for line and bar charts (single or multi-series).
• PieChart for single-series pie/donut charts.

Usage

import { PieChart, TwoDChart } from "@net-advantage/nabs-ui-charts";

const series = [
  { yAxis: "Mon", revenue: 18, volume: 12, forecast: 16 },
  { yAxis: "Tue", revenue: 26, volume: 17, forecast: 23 },
  { yAxis: "Wed", revenue: 22, volume: 15, forecast: 21 },
];

export function Example() {
  return (
    <>
      <TwoDChart
        chartType="line"
        series={series}
        valueName="revenue"
        valueNames={["revenue", "volume", "forecast"]}
        palette={["#3b82f6", "#ef4444", "#10b981"]}
        xAxisName="Revenue"
        topSpace={8}
        yAxisMin={0}
        yAxisMax={40}
        yAxisInterval={5}
        showLegend
      />

      <PieChart
        series={series}
        valueName="revenue"
        chartType="donut"
        palette={["#3b82f6", "#ef4444", "#10b981"]}
        showLegend
      />
    </>
  );
}

Layout Model

TwoDChart uses a structured SVG layout tuned for dense charts:

• Plot area with explicit boundary.
• Horizontal guide lines derived from y-axis scale.
• Vertical guide lines aligned to category positions.
• Left y-axis tick labels.
• Footer label zone for category labels and x-axis/series label.

Props

• series accepts y-axis labels plus one or more named numeric values.
• valueName selects a single named value (legacy/single-series mode).
• valueNames selects one or more named values for multi-series mode (up to 10 series).
• palette optionally overrides series colors for this chart instance (first 10 entries are used).
• chartType switches between line and bar rendering.
• topSpace adds top padding to the computed chart height (max value + topSpace).
• yAxisMin defines the minimum y-axis value.
• yAxisMax defines the maximum y-axis value.
• yAxisInterval defines the guide/tick interval between yAxisMin and yAxisMax.
• xAxisName and showXAxisName control the X-axis label display.
• showLegend controls whether the footer legend is rendered when multiple series are active.

PieChart

• series accepts y-axis labels plus numeric values.
• valueName selects one named value to render as slices (single-series only).
• chartType switches between pie and donut.
• palette optionally overrides slice colors for this chart instance (first 10 entries are used).
• showLegend toggles the legend beside the chart.

Notes

• Values are clamped to the configured y-axis range for drawing.
• Guide lines and y-axis ticks are generated from the configured min/max/interval.
• Multi-series rendering uses a generic 10-color palette with light/dark theme tokens.
• In multi-series mode, a footer legend is rendered under the x-axis name.
• Use the workbench Charts page to interactively tune range and interval settings.