# Data Status

> Mark each value as measured, estimated, provisional, forecast, or missing, and show the bounds you have for it.

Source: https://www.honestui.com/docs/charts/data-status

### Revenue with an open month and a forecast

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Monthly revenue in thousands of dollars (sample data).
// October is still open, and November and December are a forecast with bounds.
const data = [
  { month: "January", revenue: 312, status: "measured" },
  { month: "February", revenue: 298, status: "measured" },
  { month: "March", revenue: 341, status: "measured" },
  { month: "April", revenue: 356, status: "measured" },
  { month: "May", revenue: 349, status: "measured" },
  { month: "June", revenue: 384, status: "measured" },
  { month: "July", revenue: 402, status: "measured" },
  { month: "August", revenue: 391, status: "measured" },
  { month: "September", revenue: 428, status: "measured" },
  { month: "October", revenue: 187, status: "provisional" },
  { month: "November", revenue: 436, status: "forecast", low: 398, high: 471 },
  { month: "December", revenue: 452, status: "forecast", low: 392, high: 509 },
];

const chartConfig = {
  revenue: {
    label: "Revenue",
    colors: {
      light: ["#1d4ed8"],
      dark: ["#60a5fa"],
    },
  },
} satisfies ChartConfig;

export function ExampleLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
      ariaLabel="Sample monthly revenue. January to September are measured, October is provisional, and November and December are forecast."
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.YAxis />
      <LineChart.Tooltip />
      <LineChart.Line
        dataKey="revenue"
        statusKey="status" // [!code highlight]
        lowerKey="low" // [!code highlight]
        upperKey="high" // [!code highlight]
      >
        <LineChart.Dot variant="border" />
        <LineChart.ActiveDot variant="colored-border" />
      </LineChart.Line>
    </LineChart>
  );
}

```

## Overview [#overview]

A chart can mix numbers that deserve different amounts of trust: closed months, a month that is still open, a projection, a gap. Data status lets you say which is which. You supply the status of each value, and every Honest UI chart draws it, lists it in a key beside the plot, and explains it in the tooltip.

The charts never work a status out for you. A value with no status is drawn as an ordinary value and is not labelled "Measured". A range appears only where you supply both bounds.

## Statuses [#statuses]

| Status        | Use it for                                                      |
| ------------- | --------------------------------------------------------------- |
| `measured`    | A value recorded from the source.                               |
| `estimated`   | A value that was calculated or modelled instead of recorded.    |
| `provisional` | A value that is incomplete or unconfirmed and can still change. |
| `forecast`    | A projection for a period that has not been recorded yet.       |
| `missing`     | A point where no value was recorded.                            |

Each chart draws a status with the mark it has room for. A missing value is a dashed ring wherever the plot has a place for it; a pie chart names it in the key and a scatter chart counts it there.

| Status        | Line and area                      | Bar and pie                                                       | Scatter                       | Heatmap                        |
| ------------- | ---------------------------------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------ |
| `measured`    | Solid stroke                       | Solid fill                                                        | Filled point                  | Plain cell                     |
| `estimated`   | Dotted stroke                      | Dotted fill with an outline                                       | Ring with a centre dot        | Dot in the cell's corner       |
| `provisional` | Short dashes                       | Hatched fill with an outline                                      | Half-filled point             | Slash in the cell's corner     |
| `forecast`    | Long dashes                        | Empty shape with a dashed outline                                 | Empty ring                    | Dashed outline inside the cell |
| `missing`     | A gap, with a ring on the baseline | No bar, with a ring on the baseline; a sector is named in the key | Not drawn; counted in the key | Empty cell with a ring         |

Status is shown with stroke, fill, and shape, and it is named in the key and the tooltip, so it does not depend on color. A heatmap cell keeps its color, because the color is the value.

## Usage [#usage]

Put the status in the same row as the value it describes, then name that field with `statusKey`. Add `lowerKey` and `upperKey` when you have bounds for a value. These props go wherever the chart's value key goes: on the series part for `LineChart`, `AreaChart`, and `BarChart`, and on the chart root for `PieChart`, `ScatterChart`, and `Heatmap`.

```tsx
import { LineChart, type ChartConfig } from "honestui/charts";

const data = [
  { month: "September", revenue: 428, status: "measured" },
  { month: "October", revenue: 187, status: "provisional" },
  { month: "November", revenue: 436, status: "forecast", low: 398, high: 471 },
  { month: "December", revenue: null, status: "missing" },
];

<LineChart data={data} config={chartConfig} xDataKey="month">
  <LineChart.XAxis dataKey="month" />
  <LineChart.Tooltip />
  <LineChart.Line dataKey="revenue" statusKey="status" lowerKey="low" upperKey="high" />
</LineChart>
```

When a chart has several series, give each one its own fields, such as `webStatus` and `mobileStatus`. `AreaChart.Area` and `BarChart.Bar` take the same three props.

`PieChart` and `Heatmap` read one value per row, so they take the props on the root:

```tsx
<PieChart data={data} config={chartConfig} dataKey="tickets" nameKey="channel" statusKey="status">
  <PieChart.Pie />
</PieChart>

<Heatmap data={data} config={chartConfig} xDataKey="day" yDataKey="hour" valueDataKey="orders" statusKey="status">
  <Heatmap.Cells />
</Heatmap>
```

A scatter point has two values, so `ScatterChart` takes one `statusKey` for the point and separate bounds for each axis: `yLowerKey` and `yUpperKey`, and `xLowerKey` and `xUpperKey`.

```tsx
<ScatterChart
  data={data}
  config={chartConfig}
  xDataKey="floorArea"
  yDataKey="energyUse"
  statusKey="status"
  yLowerKey="low"
  yUpperKey="high"
>
  <ScatterChart.Scatter dataKey="office" />
</ScatterChart>
```

### How segments are drawn [#how-segments-are-drawn]

A line segment joins two points, so it needs a rule when their statuses differ. A segment is solid only when both of its ends are measured or have no status. Otherwise it takes the status of its later point, or of its earlier point when the later one is solid. The line never crosses a point that has no value.

### Ranges [#ranges]

On line, area, bar, and scatter charts, a range is drawn as a whisker from the lower bound to the upper bound, at that point only. The chart does not join whiskers into a band, because that would draw bounds between points that you did not supply. A range can appear with any status, including `measured`, and on a line, area, or bar point that has bounds but no value.

A pie sector and a heatmap cell have no place to draw a whisker, so those charts report the range in the tooltip only.

## Examples [#examples]

### An estimated value and a missing value [#an-estimated-value-and-a-missing-value]

### statusKey with a gap

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Daily sensor temperature in °C (sample data).
// Thursday was reconstructed from neighbouring sensors, and Saturday was never recorded.
const data = [
  { day: "Monday", temperature: 18.2, status: "measured" },
  { day: "Tuesday", temperature: 19.1, status: "measured" },
  { day: "Wednesday", temperature: 17.6, status: "measured" },
  { day: "Thursday", temperature: 18.4, status: "estimated", low: 17.5, high: 19.3 },
  { day: "Friday", temperature: 20.3, status: "measured" },
  { day: "Saturday", temperature: null, status: "missing" },
  { day: "Sunday", temperature: 19.7, status: "measured" },
];

const chartConfig = {
  temperature: {
    label: "Temperature",
    colors: {
      light: ["#b45309"],
      dark: ["#fbbf24"],
    },
  },
} satisfies ChartConfig;

export function ExampleLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="day"
      ariaLabel="Sample daily temperature. Thursday is estimated and Saturday is missing."
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="day" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.YAxis />
      <LineChart.Tooltip />
      <LineChart.Line
        dataKey="temperature"
        statusKey="status" // [!code highlight]
        lowerKey="low"
        upperKey="high"
      >
        <LineChart.Dot variant="border" />
        <LineChart.ActiveDot variant="colored-border" />
      </LineChart.Line>
    </LineChart>
  );
}

```

### Area [#area]

### Two series with their own status fields

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Weekly active users by platform (sample data).
// Week 9 is still being counted, weeks 10 to 12 are a forecast with bounds,
// and the mobile counter was offline in week 5.
const data = [
  { week: "W1", web: 4120, webStatus: "measured", mobile: 2310, mobileStatus: "measured" },
  { week: "W2", web: 4280, webStatus: "measured", mobile: 2440, mobileStatus: "measured" },
  { week: "W3", web: 4190, webStatus: "measured", mobile: 2610, mobileStatus: "measured" },
  { week: "W4", web: 4460, webStatus: "measured", mobile: 2790, mobileStatus: "measured" },
  { week: "W5", web: 4530, webStatus: "measured", mobile: null, mobileStatus: "missing" },
  { week: "W6", web: 4610, webStatus: "measured", mobile: 3020, mobileStatus: "measured" },
  { week: "W7", web: 4720, webStatus: "measured", mobile: 3180, mobileStatus: "measured" },
  { week: "W8", web: 4690, webStatus: "measured", mobile: 3260, mobileStatus: "measured" },
  { week: "W9", web: 3140, webStatus: "provisional", mobile: 2090, mobileStatus: "provisional" },
  {
    week: "W10",
    web: 4810,
    webStatus: "forecast",
    webLow: 4560,
    webHigh: 5050,
    mobile: 3420,
    mobileStatus: "forecast",
    mobileLow: 3200,
    mobileHigh: 3650,
  },
  {
    week: "W11",
    web: 4880,
    webStatus: "forecast",
    webLow: 4540,
    webHigh: 5230,
    mobile: 3530,
    mobileStatus: "forecast",
    mobileLow: 3230,
    mobileHigh: 3840,
  },
  {
    week: "W12",
    web: 4950,
    webStatus: "forecast",
    webLow: 4510,
    webHigh: 5400,
    mobile: 3650,
    mobileStatus: "forecast",
    mobileLow: 3260,
    mobileHigh: 4050,
  },
];

const chartConfig = {
  web: {
    label: "Web",
    colors: {
      light: ["#1d4ed8"],
      dark: ["#60a5fa"],
    },
  },
  mobile: {
    label: "Mobile",
    colors: {
      light: ["#b45309"],
      dark: ["#fbbf24"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="week"
      ariaLabel="Sample weekly active users for web and mobile. Weeks 1 to 8 are measured, week 9 is provisional, weeks 10 to 12 are forecast, and mobile is missing in week 5."
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="week" />
      <AreaChart.YAxis />
      <AreaChart.Legend />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="web"
        variant="gradient"
        statusKey="webStatus" // [!code highlight]
        lowerKey="webLow" // [!code highlight]
        upperKey="webHigh" // [!code highlight]
      />
      <AreaChart.Area
        dataKey="mobile"
        variant="gradient"
        statusKey="mobileStatus" // [!code highlight]
        lowerKey="mobileLow" // [!code highlight]
        upperKey="mobileHigh" // [!code highlight]
      />
    </AreaChart>
  );
}

```

### Bar [#bar]

### Every status on a grouped bar chart

```tsx
"use client";

import { BarChart, type ChartConfig } from "honestui/charts";

// Scenario: Quarterly orders by channel (sample data).
// Q2 retail was estimated after a point-of-sale outage, wholesale was not
// reported in Q3, Q4 is still open, and next year's Q1 is a forecast with bounds.
const data = [
  { quarter: "Q1", retail: 1840, retailStatus: "measured", wholesale: 1210, wholesaleStatus: "measured" },
  {
    quarter: "Q2",
    retail: 1960,
    retailStatus: "estimated",
    retailLow: 1820,
    retailHigh: 2100,
    wholesale: 1340,
    wholesaleStatus: "measured",
  },
  { quarter: "Q3", retail: 2110, retailStatus: "measured", wholesale: null, wholesaleStatus: "missing" },
  { quarter: "Q4", retail: 940, retailStatus: "provisional", wholesale: 610, wholesaleStatus: "provisional" },
  {
    quarter: "Q1 next",
    retail: 2050,
    retailStatus: "forecast",
    retailLow: 1790,
    retailHigh: 2310,
    wholesale: 1420,
    wholesaleStatus: "forecast",
    wholesaleLow: 1230,
    wholesaleHigh: 1610,
  },
];

const chartConfig = {
  retail: {
    label: "Retail",
    colors: {
      light: ["#1d4ed8"],
      dark: ["#60a5fa"],
    },
  },
  wholesale: {
    label: "Wholesale",
    colors: {
      light: ["#b45309"],
      dark: ["#fbbf24"],
    },
  },
} satisfies ChartConfig;

export function ExampleBarChart() {
  return (
    <BarChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="quarter"
      ariaLabel="Sample quarterly orders for retail and wholesale. Retail is estimated in Q2, wholesale is missing in Q3, Q4 is provisional, and Q1 of next year is forecast."
    >
      <BarChart.Grid />
      <BarChart.XAxis dataKey="quarter" />
      <BarChart.YAxis />
      <BarChart.Legend />
      <BarChart.Tooltip />
      <BarChart.Bar
        dataKey="retail"
        statusKey="retailStatus" // [!code highlight]
        lowerKey="retailLow" // [!code highlight]
        upperKey="retailHigh" // [!code highlight]
      />
      <BarChart.Bar
        dataKey="wholesale"
        statusKey="wholesaleStatus" // [!code highlight]
        lowerKey="wholesaleLow" // [!code highlight]
        upperKey="wholesaleHigh" // [!code highlight]
      />
    </BarChart>
  );
}

```

### Pie [#pie]

A missing sector cannot be drawn, so the key names it. The remaining sectors are then shares of the known total, not of the whole.

### A donut with a missing sector

```tsx
"use client";

import { PieChart, type ChartConfig } from "honestui/charts";

// Scenario: Support tickets by channel this quarter (sample data).
// Chat is still being counted, phone was estimated from call logs, and the
// social inbox export failed, so its total is unknown.
const data = [
  { channel: "email", tickets: 1840, status: "measured" },
  { channel: "chat", tickets: 1260, status: "provisional" },
  { channel: "phone", tickets: 720, status: "estimated", low: 640, high: 810 },
  { channel: "forum", tickets: 410, status: "measured" },
  { channel: "social", tickets: null, status: "missing" },
];

const chartConfig = {
  email: { label: "Email", colors: { light: ["#1d4ed8"], dark: ["#60a5fa"] } },
  chat: { label: "Chat", colors: { light: ["#047857"], dark: ["#34d399"] } },
  phone: { label: "Phone", colors: { light: ["#b45309"], dark: ["#fbbf24"] } },
  forum: { label: "Forum", colors: { light: ["#7e22ce"], dark: ["#c084fc"] } },
  social: { label: "Social", colors: { light: ["#be123c"], dark: ["#fb7185"] } },
} satisfies ChartConfig;

export function ExamplePieChart() {
  return (
    <PieChart
      data={data}
      config={chartConfig}
      dataKey="tickets"
      nameKey="channel"
      statusKey="status" // [!code highlight]
      lowerKey="low" // [!code highlight]
      upperKey="high" // [!code highlight]
      className="h-full w-full p-4"
      ariaLabel="Sample support tickets by channel. Email and forum are measured, chat is provisional, phone is estimated, and social is missing."
    >
      <PieChart.Legend />
      <PieChart.Tooltip />
      <PieChart.Pie innerRadius="45%" paddingAngle={2} />
    </PieChart>
  );
}

```

### Scatter [#scatter]

### Point status with bounds on the y value

```tsx
"use client";

import { ScatterChart, type ChartConfig } from "honestui/charts";

// Scenario: Building energy use against floor area (sample data).
// Two buildings have modelled readings with bounds, one has a partial year,
// one is a projection for a building that opens next year, and one meter failed.
const data = [
  { building: "Harbor Tower", type: "office", floorArea: 96, energyUse: 103, status: "measured" },
  { building: "Maple Center", type: "office", floorArea: 80, energyUse: 87, status: "measured" },
  { building: "Civic Hall", type: "office", floorArea: 106, energyUse: 95, status: "estimated", low: 88, high: 104 },
  { building: "Union House", type: "office", floorArea: 87, energyUse: 108, status: "provisional" },
  { building: "Market Annex", type: "office", floorArea: 69, energyUse: 81, status: "measured" },
  { building: "Quay Building", type: "office", floorArea: 118, energyUse: 112, status: "forecast", low: 101, high: 124 },
  { building: "Roosevelt School", type: "school", floorArea: 40, energyUse: 106, status: "measured" },
  { building: "Lincoln School", type: "school", floorArea: 55, energyUse: 101, status: "estimated", low: 94, high: 109 },
  { building: "Adams School", type: "school", floorArea: 26, energyUse: 92, status: "measured" },
  { building: "Franklin School", type: "school", floorArea: 34, energyUse: null, status: "missing" },
  { building: "Jefferson School", type: "school", floorArea: 48, energyUse: 84, status: "provisional" },
];

const chartConfig = {
  floorArea: { label: "Floor area" },
  energyUse: { label: "Energy use" },
  office: { label: "Office", colors: { light: ["#1d4ed8"], dark: ["#60a5fa"] } },
  school: { label: "School", colors: { light: ["#b45309"], dark: ["#fbbf24"] } },
} satisfies ChartConfig;

export function ExampleScatterChart() {
  return (
    <ScatterChart
      data={data}
      config={chartConfig}
      xDataKey="floorArea"
      yDataKey="energyUse"
      groupDataKey="type"
      pointNameDataKey="building"
      statusKey="status" // [!code highlight]
      yLowerKey="low" // [!code highlight]
      yUpperKey="high" // [!code highlight]
      className="h-full w-full p-4"
      ariaLabel="Sample energy use against floor area for offices and schools. Most readings are measured; some are estimated, provisional, or forecast, and one school has no reading."
    >
      <ScatterChart.Grid />
      <ScatterChart.XAxis label="Floor area (thousand sq ft)" hideDots />
      <ScatterChart.YAxis label="Energy use (kBtu per sq ft)" hideDots />
      <ScatterChart.Legend />
      <ScatterChart.Tooltip />
      <ScatterChart.Scatter dataKey="office" symbolSize={12} />
      <ScatterChart.Scatter dataKey="school" symbolSize={12} />
    </ScatterChart>
  );
}

```

### Heatmap [#heatmap]

### Cell status over the value color

```tsx
"use client";

import { Heatmap, type ChartConfig } from "honestui/charts";

// Scenario: Café orders per hour across one week (sample data).
// Saturday is today and still open, Sunday is a forecast, the till was offline
// on Wednesday afternoon, and Thursday morning was rebuilt from paper receipts.
const data = [
  { day: "Monday", hour: "8 AM", orders: 38, status: "measured" },
  { day: "Monday", hour: "12 PM", orders: 64, status: "measured" },
  { day: "Monday", hour: "4 PM", orders: 41, status: "measured" },
  { day: "Tuesday", hour: "8 AM", orders: 42, status: "measured" },
  { day: "Tuesday", hour: "12 PM", orders: 71, status: "measured" },
  { day: "Tuesday", hour: "4 PM", orders: 39, status: "measured" },
  { day: "Wednesday", hour: "8 AM", orders: 45, status: "measured" },
  { day: "Wednesday", hour: "12 PM", orders: 68, status: "measured" },
  { day: "Wednesday", hour: "4 PM", orders: null, status: "missing" },
  { day: "Thursday", hour: "8 AM", orders: 40, status: "estimated", low: 34, high: 46 },
  { day: "Thursday", hour: "12 PM", orders: 74, status: "measured" },
  { day: "Thursday", hour: "4 PM", orders: 47, status: "measured" },
  { day: "Friday", hour: "8 AM", orders: 51, status: "measured" },
  { day: "Friday", hour: "12 PM", orders: 83, status: "measured" },
  { day: "Friday", hour: "4 PM", orders: 58, status: "measured" },
  { day: "Saturday", hour: "8 AM", orders: 33, status: "measured" },
  { day: "Saturday", hour: "12 PM", orders: 52, status: "provisional" },
  { day: "Saturday", hour: "4 PM", orders: 12, status: "provisional" },
  { day: "Sunday", hour: "8 AM", orders: 24, status: "forecast", low: 18, high: 31 },
  { day: "Sunday", hour: "12 PM", orders: 57, status: "forecast", low: 46, high: 69 },
  { day: "Sunday", hour: "4 PM", orders: 35, status: "forecast", low: 27, high: 44 },
];

const chartConfig = {
  orders: {
    label: "Orders",
    colors: {
      light: ["#ecfdf5", "#a7f3d0", "#34d399", "#047857"],
      dark: ["#052e2b", "#065f52", "#10b981", "#6ee7b7"],
    },
  },
} satisfies ChartConfig;

export function ExampleHeatmap() {
  return (
    <Heatmap
      data={data}
      config={chartConfig}
      xDataKey="day"
      yDataKey="hour"
      valueDataKey="orders"
      statusKey="status" // [!code highlight]
      lowerKey="low" // [!code highlight]
      upperKey="high" // [!code highlight]
      className="h-full w-full p-4"
      ariaLabel="Sample café orders per hour for one week. Wednesday 4 PM is missing, Thursday 8 AM is estimated, Saturday from noon is provisional, and Sunday is forecast."
    >
      <Heatmap.XAxis tickFormatter={(value) => value.slice(0, 3)} />
      <Heatmap.YAxis />
      <Heatmap.Tooltip valueFormatter={(value) => `${value} orders/hr`} />
      <Heatmap.Cells variant="default" showValues />
    </Heatmap>
  );
}

```

## Behavior to know about [#behavior-to-know-about]

* **Other stroke and fill options.** Dashes and fills carry status on a series that sets `statusKey`, `lowerKey`, or `upperKey`. On that series, `strokeVariant`, `glowing`, `enableBufferLine`, `bufferBar`, and `connectNulls` are not applied, and a bar's status fill replaces its `variant` fill for estimated, provisional, and forecast values.
* **Absent values.** On a series or chart that reads a status, a `null`, empty, or non-numeric value is left empty instead of being drawn at zero. Charts and series that do not read a status keep their existing behavior.
* **Points that cannot be placed.** A scatter point needs both coordinates. A point marked `missing` is left out and counted in the key, for example "Missing: 1 not shown".
* **Small marks.** Heatmap status marks need room. In a dense heatmap with cells only a few pixels wide, rely on the tooltip and a text summary.
* **Stacked charts.** In a stacked chart, a range moves up with the series it belongs to. In an expanded area chart or a percent bar chart, ranges are not drawn, because bounds on a value are not bounds on its share. If any value in a category is missing, every share in that category is unknown and the category is left empty.
* **Invalid input.** In development, the chart logs a console warning and skips the claim it cannot draw: a status that is not one of the five, a row marked `missing` that still has a value, a single bound, bounds that are out of order or exclude the value, or a scatter point whose x or y is not a number.

## Accessibility [#accessibility]

The key is a list under the plot, or above it when the chart's legend sits at the bottom. Each entry carries its explanation for screen readers, and the default `ariaLabel` names the statuses in the chart. The plot itself is a canvas, and the tooltip is pointer-operated, so give readers a text summary or a data table that includes each value's status when the difference matters to a decision.

## Changing the text [#changing-the-text]

Pass `dataStatusText` to the chart root to translate or reword the labels and explanations. Anything you leave out keeps its default. Define the object outside the component so the chart does not rebuild on every render.

```tsx
import { LineChart, type DataStatusText } from "honestui/charts";

const dataStatusText: DataStatusText = {
  keyLabel: "Datenstatus",
  rangeLabel: "Spanne",
  noValueLabel: "Kein Wert",
  statuses: {
    forecast: {
      label: "Prognose",
      description: "Eine Hochrechnung für einen Zeitraum, der noch nicht erfasst ist.",
    },
  },
};

<LineChart data={data} config={chartConfig} dataStatusText={dataStatusText}>
  <LineChart.Line dataKey="revenue" statusKey="status" />
</LineChart>
```

## API Reference [#api-reference]

<ApiHeading>
  Line, Area, and Bar parts; PieChart and Heatmap roots
</ApiHeading>


  ### `statusKey`

type: `string`

The row field that holds this series' status: `"measured"`, `"estimated"`, `"provisional"`, `"forecast"`, or `"missing"`. Rows without the field are drawn without a status.

  ### `lowerKey`

type: `string`

The row field that holds the lower bound. Set it together with `upperKey`.

  ### `upperKey`

type: `string`

The row field that holds the upper bound. Set it together with `lowerKey`.


<ApiHeading>
  ScatterChart root
</ApiHeading>


  ### `statusKey`

type: `string`

The row field that holds each point's status.

  ### `yLowerKey`

type: `string`

The row field that holds the lower bound of the y value. Set it together with `yUpperKey`.

  ### `yUpperKey`

type: `string`

The row field that holds the upper bound of the y value. Set it together with `yLowerKey`.

  ### `xLowerKey`

type: `string`

The row field that holds the lower bound of the x value. Set it together with `xUpperKey`.

  ### `xUpperKey`

type: `string`

The row field that holds the upper bound of the x value. Set it together with `xLowerKey`.


<ApiHeading>
  Every chart root
</ApiHeading>


  ### `dataStatusText`

type: `DataStatusText`

Replacement text for the status labels and explanations, the key label, the range label, the label shown for a point with no value, and the count of points that are not shown.