# @cloudflare/chart-time

> Cloudflare time-based chart presentational components

Latest version **6.0.9** (published 2026-09-29) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @cloudflare/chart-time
pnpm add @cloudflare/chart-time
yarn add @cloudflare/chart-time
bun add @cloudflare/chart-time
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 6.0.9 |
| Published | 2026-09-29 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 236.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vasco Asturiano <vasco@cloudflare.com> |
| Maintainers | cf-ci-write, dash_service_account, wrangler-publisher, cf-npm-publish |

## Links

- npm: https://www.npmjs.com/package/@cloudflare/chart-time
- npm.io page: https://npm.io/package/@cloudflare/chart-time

## Dependencies (10)

- [d3-time](https://npm.io/package/d3-time.md) ^1.0.7
- [d3-scale](https://npm.io/package/d3-scale.md) ^2.1.2
- [polished](https://npm.io/package/polished.md) ^4.1.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [react-nvd3](https://npm.io/package/react-nvd3.md) NuCivic/react-nvd3#df1ce741a0bfb163b9dd4b737de8d1dd328782dd
- [d3-time-format](https://npm.io/package/d3-time-format.md) ^2.2.3
- [@cloudflare/intl-react](https://npm.io/package/@cloudflare/intl-react.md) ^1.9.80
- [@cloudflare/component-box](https://npm.io/package/@cloudflare/component-box.md) ^5.1.3
- [@cloudflare/component-text](https://npm.io/package/@cloudflare/component-text.md) ^5.1.3
- [@cloudflare/util-formatters](https://npm.io/package/@cloudflare/util-formatters.md) ^2.7.11

## Recent versions

- 6.0.9 (latest) — 2026-09-29
- 6.0.8 — 2026-06-30
- 6.0.7 — 2026-01-22
- 6.0.6 — 2026-01-21
- 6.0.5 — 2025-12-17
- 6.0.4 — 2025-10-14
- 6.0.3 — 2025-09-10
- 6.0.2 — 2025-05-22
- 6.0.1 — 2025-05-09
- 6.0.0 — 2025-05-08
- 5.1.12 — 2025-04-30
- 5.1.11 — 2025-03-27
- 5.1.10 — 2024-10-03
- 5.1.9 — 2024-10-03
- 5.1.8 — 2024-09-03
- … 576 more at https://npm.io/package/@cloudflare/chart-time/versions

## README

# @cloudflare/chart-time

> Cloudflare time-based chart presentational components

## Installation
Installation with yarn is recommended

```sh

$ yarn add @cloudflare/chart-time

```

## Usage

```jsx
import React from 'react';
import { Box } from '@cloudflare/component-box';
import { TimeseriesChart } from '../../src';

const randomData = [];
const N_SERIES = 5;
const VAL_MAX_SLOPE = 10; // max amount of val change per time
const TIME_BIN = 60 * 60 * 1000; // 1h
const START_TIME =
  Math.round(new Date() / TIME_BIN) * TIME_BIN - 5 * 24 * 60 * 60 * 1000; // 5d
const NOW = new Date();

[...Array(N_SERIES).keys()].forEach(ser => {
  let ts = START_TIME;
  let val = 0;
  while (ts <= NOW) {
    const valVar =
      Math.round(Math.random() * VAL_MAX_SLOPE * 2) - VAL_MAX_SLOPE;
    val += valVar;
    val = Math.max(0, val); // prevent negative vals

    randomData.push({
      ser: `ser${ser + 1}`,
      ts: +ts,
      val
    });

    ts += TIME_BIN;
  }
});

const ViewComponent = () => (
  <div>
    {[['line', 'stacked'], ['normalized', 'stream']].map((row, i) => (
      <Box key={i} display="flex">
        {row.map(type => (
          <Box key={type} flex="1">
            <TimeseriesChart
              type={type}
              interpolation="spline"
              height={300}
              data={randomData}
              timeDimension="ts"
              seriesDimension="ser"
              valueDimension="val"
              valueLabel="Units"
            />
          </Box>
        ))}
      </Box>
    ))}
  </div>
);

export default ViewComponent;

```

---
_Source: https://npm.io/package/@cloudflare/chart-time · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._