1.0.0-beta.13

The thirteenth beta of HeroUI Native Pro rebuilds the charts on one chart core that runs on the UI thread. React renders a chart's parts once; after that, data changes, layout, animations, scrubbing, and axis labels update through Reanimated shared values without re-rendering. LineChart, AreaChart, BarChart, and ComposedChart move to a parts-as-children API, and PieChart, RadarChart, and RadialChart drop their render functions. Every chart now supports press selection, onSelect, and a Tooltip part, and tooltip text updates on the UI thread while you scrub. A new LiveChart streams samples with a continuously scrolling time window. This is a breaking release for every chart: read the Breaking Changes below before you upgrade.

Try It on Your Device

Installation

Follow the installation guide to authenticate the private registry with your HEROUI_PERSONAL_TOKEN, install heroui-native-pro, and wire up HeroUINativeProvider.

Update to the latest version:

npm install heroui-native-pro@latest

pnpm add heroui-native-pro@latest

yarn add heroui-native-pro@latest

bun add heroui-native-pro@latest

Charts now need only the optional react-native-skia peer (>=3.0.0). d3-scale, d3-shape, d3-zoom, its-fine, and react-fast-compare are no longer peers, so you can remove them from your app if nothing else uses them.

For the best tooltip performance, also install the new optional peer react-native-animateable-text (>=0.19.3, New Architecture). Chart tooltips then write their text through a native Text on the UI thread; without it they fall back to a read-only TextInput. Rebuild the app after installing it, since the package ships a native view:

npm install react-native-animateable-text

pnpm add react-native-animateable-text

yarn add react-native-animateable-text

bun add react-native-animateable-text

npx expo install react-native-animateable-text

What's New

New Components

This release introduces 1 new component in Charts:

• LiveChart: A streaming line chart for live data, with a continuously scrolling time window and press-to-inspect. (Documentation)

LiveChart

LiveChart is built for data that arrives continuously, such as heart rate, prices, or sensor readings. Samples go into a buffer that lives on the UI thread, and one frame loop per chart scrolls the window, glides the line's end between samples, and eases the y-range. Pushing a sample never re-renders React, so use it instead of passing a new data array to LineChart on every sample.

Features:

• Compound parts: LiveChart.Line, LiveChart.Grid, LiveChart.YAxis, LiveChart.ReferenceLine, LiveChart.Dot, LiveChart.Crosshair, LiveChart.Indicator, and LiveChart.Tooltip
• useLiveChartData creates the sample buffer; push and reset are worklets you can call from the JS or the UI thread, and latest / points are shared values for readouts outside the chart
• Samples at any rate: delay ('auto' by default) keeps the right edge slightly behind real time so the line's end moves between known samples instead of jumping
• A y-range that fits the visible samples (grows at once, shrinks smoothly), or fixed ends with yDomain
• Press-and-drag inspection on the UI thread, with selection={{ freeze: true }} to hold the window while the finger is down
• isActive={false} pauses the frame loop, LiveChart.Line animateIn draws the line in, and animation="disable-all" turns every animation off
• Stays left-to-right in RTL layouts, since time runs left to right in every locale

Usage:

import { LiveChart, useLiveChartData } from "heroui-native-pro";
import { useEffect } from "react";

export function HeartRate() {
  const data = useLiveChartData({ capacity: 200 });

  useEffect(() => {
    let bpm = 120;
    const id = setInterval(() => {
      bpm += (Math.random() - 0.5) * 6;
      data.push({ time: Date.now(), value: bpm });
    }, 450);
    return () => clearInterval(id);
  }, [data]);

  return (
    <LiveChart data={data} window={30_000} className="h-[240px]">
      <LiveChart.Grid />
      <LiveChart.YAxis />
      <LiveChart.ReferenceLine value={150} />
      <LiveChart.Line colorClassName="accent-danger" />
      <LiveChart.Dot colorClassName="accent-danger" />
      <LiveChart.Crosshair />
      <LiveChart.Tooltip
        format={(value) => {
          "worklet";
          return `${Math.round(value)} bpm`;
        }}
      />
    </LiveChart>
  );
}

For complete documentation and examples, see the LiveChart component page.

UI-thread chart core

All seven charts share one core. Layout, domains, ticks, paths, animations, and press selection are derived values on the UI thread, and the Skia parts render directly inside the canvas without a context bridge. Rows stay on the JS thread; only the plotted fields are copied to the UI thread as typed-array columns, and lines and areas are thinned per pixel column. On iOS, a 100,000-row line chart goes from about 5.7 s to about 0.27 s end to end.

Parts-as-children cartesian charts

LineChart, AreaChart, BarChart, and ComposedChart take parts as plain children. Each series names its own field with dataKey, and every part is optional: a chart with only a Line is a sparkline.

import { formatCurrency, LineChart } from "heroui-native-pro";

const formatRevenue = (value: number) => {
  "worklet";
  return formatCurrency(value, { compact: true });
};

export function RevenueChart() {
  return (
    <LineChart data={DATA} xKey="month" className="h-[220px]">
      <LineChart.Grid />
      <LineChart.XAxis />
      <LineChart.YAxis count={4} format={formatRevenue} />
      <LineChart.Line dataKey="revenue" curveType="monotoneX" />
      <LineChart.Crosshair />
      <LineChart.Indicator dataKey="revenue" />
      <LineChart.Tooltip dataKey="revenue" format={formatRevenue} />
    </LineChart>
  );
}

Features:

• Shared parts — Grid, XAxis, YAxis, Crosshair, Indicator, and Tooltip; the y-axis reserves exactly the width its widest label needs
• LineChart.Line — curveType, dashed, dotRadius, and a draw-in animateIn with resetKey to replay it
• AreaChart.Area — gradient fill by default, stacked layers with a shared stack id, and AreaChart.Range for min–max bands
• BarChart.Bar — grouped and stacked bars, orientation="horizontal", gradient colors, radius, barSize / barRatio, and grow-in
• ComposedChart — mixes bar, line, area, and range series; axis="right" with YAxis side="right" adds a right axis whose round values sit on the left axis's grid lines
• animate on the root glides from old data to new on the UI thread (timing, spring, or false)

For complete documentation and examples, see the LineChart, AreaChart, BarChart, and ComposedChart pages.

Built-in press inspection and tooltips

Press-and-drag inspection is built into every chart. Add the Crosshair, Indicator, and Tooltip parts, or listen with onSelect, which fires on the JS thread only when the pressed row changes. PieChart, RadarChart, and RadialChart gain press-to-inspect too: the pressed slice, spoke, or ring is highlighted and their new Tooltip part opens away from the center.

Tooltip renders as a React Native view above the canvas. Build custom content from ChartTooltipLabel and ChartTooltipValue; the position follows on the UI thread.

import { ChartTooltipLabel, ChartTooltipValue } from "heroui-native-pro";

<ComposedChart.Tooltip className="gap-1 rounded-xl bg-overlay p-2.5">
  <ChartTooltipLabel xKey="month" className="text-xs font-semibold" />
  <ChartTooltipValue dataKey="revenue" format={formatThousands} />
  <ChartTooltipValue dataKey="orders" />
</ComposedChart.Tooltip>;

selection={{ activateAfter }} changes the press delay and selection={false} turns inspection off. For custom overlays, useChartSelection, useChartSelectedValue, and useChartSelectedLabel expose the press state as shared values.

Tooltip text on the UI thread

When a tooltip's format is a worklet (or omitted), ChartTooltipValue, ChartTooltipLabel, and the default tooltips write their text from the UI thread, so scrubbing renders no React however many rows the finger crosses. This applies to every chart, including LiveChart.

• With react-native-animateable-text installed: the text is a native Text that sizes itself to every value. This is the recommended setup (see Installation).
• Without it: the text is a read-only TextInput that keeps the width of the widest value it has shown, so the tooltip does not change width while scrubbing.

With a plain (non-worklet) format, React renders the text and re-renders it at most once per JS frame, so a fast scrub never queues renders. See Tooltip text on the UI thread.

Worklet formatters

Axis and tooltip formatters of the cartesian charts run on the UI thread, so they must be worklets. The package now ships worklet formatters you can use directly or wrap:

• formatCompact — 15K
• formatGroupedNumber — 1,234.5
• formatCurrency — $1,234.50, or $1.2K with { compact: true }
• formatPercent — 12.3%

Polar charts

• PieChart: PieChart.Pie and its render function are gone; innerRadius, startAngle, and circleSweepDegrees move to the root. colorKey is optional (rows without a color take chart-1 … chart-5), animateIn sweeps slices in, and PieChart.Slice dims the other slices while one is pressed. (Documentation)
• RadarChart: Parts keep their names. Colors are plain strings or colorClassName, animateIn / resetKey on Radar grow it from the center, and Radar shows an activeDotRadius dot on the pressed vertex. (Documentation)
• RadialChart: colorKey is optional, barSize and the sweep-in move to the root, and RadialChart.Bar gains dimOpacity. (Documentation)

Improvements & Bug Fixes

• Charts: animation="disable-all" now also stops the tooltip fade and glide, and on RadarChart it stops Radar animations (#104).
• Charts: Theme colors resolve inside the canvas, so a chart inside ScopedTheme uses the scoped theme (#104).
• Charts: The first frame draws complete instead of building up over several frames (#104).
• Charts: Published builds keep 'worklet' directives, so bundled formatters work on the UI thread (#104).
• Charts: react-native-skia now loads when the first chart renders instead of when the library is imported, so apps that use only non-chart components never run Skia's native setup (#104).
• Charts: Charts no longer pass dependency arrays to Reanimated, which Reanimated 4.7 ignores on native and warns about in development (#104).
• Charts: onSelect and the useChartSelectedValue / useChartSelectedLabel hooks deliver at most once per JS frame and always end on the newest row, so a fast scrub no longer backs up the JS thread (#104).
• Dependencies: Adds react-native-animateable-text (>=0.19.3) as an optional peer for UI-thread tooltip text.
• Dependencies: d3-scale, d3-shape, d3-zoom, its-fine, and react-fast-compare are removed from the optional peers. heroui-native stays at ^1.0.11.

⚠️ Breaking Changes

Cartesian charts use parts instead of render props

LineChart, AreaChart, BarChart, and ComposedChart no longer take yKeys or a render-prop child, and useChartPressState is removed.

Before:

const { state, isActive } = useChartPressState({
  x: "" as string,
  y: { revenue: 0 },
});

<LineChart
  data={DATA}
  xKey="month"
  yKeys={["revenue"]}
  chartPressState={state}
  yAxis={[{ tickCount: 4, formatYLabel: formatRevenue }]}
  wrapperClassName="h-[200px]"
>
  {({ points, chartBounds }) => (
    <>
      <LineChart.Line points={points.revenue} curveType="monotoneX" />
      {isActive ? (
        <>
          <ChartCrosshair
            x={state.x.position}
            top={chartBounds.top}
            bottom={chartBounds.bottom}
          />
          <ChartIndicator x={state.x.position} y={state.y.revenue.position} />
        </>
      ) : null}
    </>
  )}
</LineChart>;

After:

const formatRevenue = (value: number) => {
  "worklet";
  return `$${(value / 1000).toFixed(0)}k`;
};

<LineChart data={DATA} xKey="month" className="h-[200px]">
  <LineChart.Grid />
  <LineChart.XAxis />
  <LineChart.YAxis count={4} format={formatRevenue} />
  <LineChart.Line dataKey="revenue" curveType="monotoneX" />
  <LineChart.Crosshair />
  <LineChart.Indicator dataKey="revenue" />
  <LineChart.Tooltip dataKey="revenue" />
</LineChart>;

Series props

Formatters must be worklets

Axis and tooltip format functions on the cartesian charts run on the UI thread. Start them with the 'worklet' directive or use the bundled formatters.

Data must be a new array to update

data is a plain array. Pass a new array to update a chart; changes made to the same array in place are not detected.

PieChart, RadarChart, and RadialChart

Before:

<PieChart
  data={DATA}
  labelKey="name"
  valueKey="value"
  colorKey="color"
  wrapperClassName="h-[220px]"
>
  <PieChart.Pie innerRadius="68%">
    {() => (
      <>
        <PieChart.Slice animate={{ type: "timing" }} />
        <PieChart.SliceAngularInset
          angularInset={{ angularStrokeWidth: 4, angularStrokeColor: bg }}
        />
      </>
    )}
  </PieChart.Pie>
</PieChart>

After:

<PieChart
  data={DATA}
  labelKey="name"
  valueKey="value"
  colorKey="color"
  innerRadius="68%"
  className="h-[220px]"
>
  <PieChart.Slice />
  <PieChart.SliceAngularInset strokeWidth={4} />
  <PieChart.Label />
</PieChart>

• wrapperClassName becomes className on all three.
• animate moves from the parts to the root and is the data-change transition for every part; animateIn / resetKey replay the mount animation.
• Skia Color props (Radar color, Grid strokeColor, axis color, Bar trackColor) take strings.
• RadialChart: headless, explicitSize, transformState, canvasProviders, containerStyle, and canvasStyle are removed, and barSize is set on the root only.

Removed components and exports

• The standalone ChartCrosshair, ChartIndicator, and ChartTooltip components are removed. Use each chart's Crosshair, Indicator, and Tooltip parts, with ChartTooltipLabel / ChartTooltipValue for custom tooltip content.
• Scatter, ScatterShape, ChartPressState, useChartPressState, ChartBounds, PointsArray, useBarPath, useBarGroupPaths, useStackedBarPaths, useSlicePath, useSliceAngularInsetPath, and PieSliceData are no longer exported.
• LineChartProps and AreaChartProps are renamed to LineChartRootProps and AreaChartRootProps; BarChartRootProps and ComposedChartRootProps have a new shape.
• Removed polar types: PieChartPieProps, PieChartRenderFn, RadarChartColorFields, RadarChartRadarAnimateConfig, RadialChartBarAnimateConfig, RadialChartColorFields, and RadialChartInputFields (use RadialChartStringFields). New: PieChartLabelSlice, PieChartTooltipProps, RadarChartTooltipProps, and RadialChartTooltipProps.

Links

• Component Documentation
• Getting Started
• 1.0.0-beta.12.1 release notes