# @asphalt-react/data-viz

> data-viz is a comprehensive charting library tailored to fulfill diverse visualization requirements.

Latest version **2.17.0** (published 2026-08-12) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @asphalt-react/data-viz
pnpm add @asphalt-react/data-viz
yarn add @asphalt-react/data-viz
bun add @asphalt-react/data-viz
```

## Health

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

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

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.17.0 |
| Published | 2026-08-12 |
| First published | 2024-04-17 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 95.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | UX Engineering - Web |
| Maintainers | sayantan1211, dawn29, antoniomontana, goto.abhinav, elayudhanira-gojek, yessyprmtsr, soorajj |
| Keywords | asphalt, data-viz, data-visualization, component, dls, design language system |

## Links

- npm: https://www.npmjs.com/package/@asphalt-react/data-viz
- npm.io page: https://npm.io/package/@asphalt-react/data-viz

## Dependencies (16)

- [@visx/axis](https://npm.io/package/@visx/axis.md) ^3.10.1
- [@visx/grid](https://npm.io/package/@visx/grid.md) ^3.5.0
- [@visx/text](https://npm.io/package/@visx/text.md) ^3.3.0
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@visx/curve](https://npm.io/package/@visx/curve.md) ^3.3.0
- [@visx/event](https://npm.io/package/@visx/event.md) ^3.3.0
- [@visx/group](https://npm.io/package/@visx/group.md) ^3.3.0
- [@visx/scale](https://npm.io/package/@visx/scale.md) ^3.5.0
- [@visx/shape](https://npm.io/package/@visx/shape.md) ^3.5.0
- [@visx/legend](https://npm.io/package/@visx/legend.md) ^3.5.0
- [@visx/vendor](https://npm.io/package/@visx/vendor.md) ^3.5.0
- [@visx/tooltip](https://npm.io/package/@visx/tooltip.md) ^3.3.0
- [@visx/responsive](https://npm.io/package/@visx/responsive.md) ^3.10.2
- [@asphalt-react/popover](https://npm.io/package/@asphalt-react/popover.md) ^2.16.0
- [@asphalt-react/typography](https://npm.io/package/@asphalt-react/typography.md) ^2.16.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 2.17.0 (latest) — 2026-08-12
- 2.0.0-alpha.41 (next) — 2024-07-02
- 2.16.0 — 2026-07-28
- 2.15.3 — 2026-07-07
- 2.15.2 — 2026-05-25
- 2.15.1 — 2026-04-28
- 2.15.0 — 2026-04-13
- 2.14.0 — 2026-03-11
- 2.13.0 — 2026-02-19
- 2.12.2 — 2026-01-28
- 2.12.1 — 2025-12-19
- 2.12.0 — 2025-11-28
- 2.11.0 — 2025-11-10
- 2.10.0 — 2025-10-27
- 2.9.0 — 2025-10-02
- … 17 more at https://npm.io/package/@asphalt-react/data-viz/versions

## README

# DataViz

![npm](https://img.shields.io/npm/dt/@asphalt-react/data-viz?style=flat-square)
[![npm version](https://badge.fury.io/js/@asphalt-react%2Fdata-viz.svg)](https://badge.fury.io/js/@asphalt-react%2Fdata-viz)

DataViz charts visually represent data to effectively communicate information and patterns. There are multiple charts availables like Bar, Grouped Bar, Stacked Bar, Line, and Donut. Use these charts to represent complex data in a visual format.

You can control whether to show legends, grid, tooltip, change the format of the tick labels, and change the position of the legend.

You can also customize the colors of the bars and lines.

The charts are all reponsive and adapts to the screen size seemlessly.

## Usage

```jsx
import React from "react"
import {
  BarChart
} from "@asphalt-react/data-viz"

const data = [
  {
    date: "2012-05-13",
    "New York": "65.3",
    "San Francisco": "52.0",
    Austin: "72.4",
  },
  {
    date: "2012-05-14",
    "New York": "64.2",
    "San Francisco": "56.0",
    Austin: "72.5",
  }
]

export const BasicBarChart = ({ ...props }) => {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <BarChart data={data} dataKey="date" />
    </div>
  )
}
```

## Types

There are multiple types of data visualization components. You can use any of them as per your use-case.

1. BarChart
2. LineChart
3. DonutChart

## Responsive behavior

We set a minimum width of "312px" and a minimum height of "360px". The minimum height excludes the legends, as their wrapping behavior depends on the number of legends and available space.

Use the `compact` prop to lower the minimum height to "60px" for tighter containers.

All charts stretch to fit their container. Ensure you account for the legend height when defining the height of the container as the legend's height is dynamic becuse of it's wrapping behaviour.

# BarChart

Bar chart which can display multiple data series, grouped, stack or side by side. Also supports both vertical and horizontal layout.

[comment]: # "BarChart Props"

## Props

### data

Bar chart data.

Example:

```js
[
  {
    month: "Jan",
    customers: 4350,
    attrition: 120
  },
  {
    month: "Feb",
    customers: 6600,
    attrition: 220
  }
]
```

To enhance the user experience, limit the number of bars to 20. In case of grouped, limit the sets to 8.

The data validation process verifies if all objects within the data array possess the identical set of keys, using the first object in the array as the reference point.

| type    | required | default |
| ------- | -------- | ------- |
| arrayOf | true     | N/A     |

### colors

Colors of individual bars in a grouped or stack bar chart. Use this prop to override the default set of colors.
Accepts an object with the key mapped to the key of the bar, and the value mapped to the color value.

For instance:

```js
const data = [
  {
    month: "Jan",
    customers: 4350,
    attrition: 120
  },
  {
    month: "Feb",
    customers: 6600,
    attrition: 220
  }
]

const colors = { customers: "#497aaa", attrition: "#666666" }
```

| type   | required | default |
| ------ | -------- | ------- |
| object | false    | N/A     |

### dataKey

Key of the datum to index the data.

For instance:

```js
const data = [
  {
    month: "Jan",
    customers: 4350,
    attrition: 120
  },
  {
    month: "Feb",
    customers: 6600,
    attrition: 220
  }
]
```

Use "month" as the `dataKey`. This plots the "month" on x-axis, whereas in case of `horizontal` bar charts, plots the data on y-axis.

| type   | required | default |
| ------ | -------- | ------- |
| string | true     | N/A     |

### xAxisLabel

Label for X-axis.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

### yAxisLabel

Label for Y-axis.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

### showGrid

Show grid lines.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### showLegend

Show chart legend.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | true    |

### legendTop

Position the legends at the top.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### xTickFormat

Formats the default x-axis tick label.

tickLabel - tick label value.
return value should be string|number.

For instance:

```js
(tickLabel) => {
 // return the formatted label
}
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### yTickFormat

Formats the default y-axis tick label.
When all data values are 0, the default display is 0.0. Users can override this format by providing a value through this prop.

tickLabel - tick label value.
return value should be "string|number".

For instance:

```js
(tickLabel) => {
 // return the formatted label
}
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### tooltip

React node to pass your own tooltip.

| type | required | default |
| ---- | -------- | ------- |
| node | false    | null    |

### viewTooltip

Show tooltip.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | true    |

### onMouseHover

Returns the value of the bar on mouse hover.

* event - browser event.
* currentData - the current data on which the mouse is hovering.
* groupData - the entire group which the current data is part of.

```js
(event, { currentData, groupData }) => {}
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### horizontal

Enable horizontal view.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### stack

Enable stack view.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### showLabel

Show label bar.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### formatLabel

Format the label value displayed on top of each bar.

totalValue - The total value represented by the bar. The value type is number.
return value should be string|number.

For instance:

```js
(totalValue) => {
 // Return the formatted value as needed
}
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### inverseTooltip

Enable inverse tooltip styles.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### xTickWrap

Enable word break.
When set to true, labels will wrap into multiple lines according to the chart’s width.
Use this prop with xTickFormat to control the maximum characters per line based on the desired label.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### compact

Lowers the chart's minimum height for tighter containers.
Supports containers as small as \~100px with a single-row, non-wrapping legend.
Legends that wrap to multiple rows need extra height beyond that.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### hideYAxis

Hide the y-axis, including its ticks, line, and `yAxisLabel` (which is not rendered when this is true).

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

# LineChart

These display data points connected by straight lines. They are commonly used to show trends over time.

[comment]: # "LineChart Props"

## Props

### data

Line chart data.

Example:

```js
[
  {
    month: "Jan",
    customers: 4350,
    attrition: 120
  },
  {
    month: "Feb",
    customers: 6600,
    attrition: 220
  }
]
```

To enhance the user experience, limit the number of lines to 20.

The data validation process verifies if all objects within the data array possess the identical set of keys, using the first object in the array as the reference point.

| type    | required | default |
| ------- | -------- | ------- |
| arrayOf | true     | N/A     |

### colors

Colors of individual lines. Use this prop to override the default set of colors.
Accepts an object with the key mapped to the key of the point, and the value mapped to the color value.

For instance:

```js
const data = [
  {
    month: "Jan",
    customers: 4350,
    attrition: 120
  },
  {
    month: "Feb",
    customers: 6600,
    attrition: 220
  }
]

const colors = { customers: "#497aaa", attrition: "#666666" }
```

| type   | required | default |
| ------ | -------- | ------- |
| object | false    | N/A     |

### dataKey

Key of the datum to index the data.

For instance:

```js
const data = [
  {
    month: "Jan",
    customers: 4350,
    attrition: 120
  },
  {
    month: "Feb",
    customers: 6600,
    attrition: 220
  }
]
```

Use "month" as the `dataKey`. This plots the "month" on x-axis.

| type   | required | default |
| ------ | -------- | ------- |
| string | true     | N/A     |

### xAxisLabel

Label for X-axis.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

### yAxisLabel

Label for Y-axis.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

### showGrid

Show grid lines.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### showLegend

Show chart legend.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | true    |

### legendTop

Position the legends at the top.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### xTickFormat

Formats the default x-axis tick label.

tickLabel - tick label value.
return value should be "string|number".

For instance:

```js
(tickLabel) => new Date(tickLabel)
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### yTickFormat

Formats the default y-axis tick label.

tickLabel - tick label value.
return value should be "string|number".

For instance:

```js
(tickLabel) => new Date(tickLabel)
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### tooltip

React node to pass your own tooltip.

| type | required | default |
| ---- | -------- | ------- |
| node | false    | null    |

### viewTooltip

Show tooltip.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | true    |

### onMouseHover

Returns the value of the point(s) on mouse hover.

* event - browser event.
* currentData - the current data on which the mouse is hovering.

```js
(event, { currentData }) => {}
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### showPoints

Show data points(circles) on the lines.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### startFromZero

Starts from 0 in y-axis. Else, takes the minimum value available.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### inverseTooltip

Enable inverse tooltip styles.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### xTickWrap

Enable word break.
When set to true, labels will wrap into multiple lines according to the chart’s width.
Use this prop with xTickFormat to control the maximum characters per line based on the desired label.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### xTickFilter

Filters x-axis tick values to control which ticks and their labels are rendered.

* value - the tick value.
* index - the index of the tick.
  return true to show the tick, false to hide it.

For instance:

```js
(value, index) => index % 2 === 0
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### compact

Lowers the chart's minimum height for tighter containers.
Supports containers as small as \~100px with a single-row, non-wrapping legend.
Legends that wrap to multiple rows need extra height beyond that.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### hideYAxis

Hide the y-axis, including its ticks, line, and `yAxisLabel` (which is not rendered when this is true).

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

# DonutChart

Donut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

[comment]: # "DonutChart Props"

## Props

### data

Donut chart data.
Accepts an object with the key mapped to an arc.

Example:

```js
  {
    Cartography: 100,
    GoFood: 200,
    Transport: 250
  }
```

| type   | required | default |
| ------ | -------- | ------- |
| object | true     | N/A     |

### colors

Colors of individual arcs in a donut chart. Use this prop to override the default set of colors.
Accepts an object with the key mapped to an arc, and the value mapped to the color value.

For instance:

```js
const data =  {
    Cartography: 100,
    GoFood: 200,
    Transport: 250
}

const colors = { GoFood: "#497aaa", Transport: "#666666" }
```

| type   | required | default |
| ------ | -------- | ------- |
| object | false    | N/A     |

### showLegend

Show chart legend.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | true    |

### legendTop

Position the legends at the top.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### tooltip

React node to pass your own tooltip.

| type | required | default |
| ---- | -------- | ------- |
| node | false    | null    |

### viewTooltip

Show tooltip.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | true    |

### onMouseHover

Returns the value of the arc on mouse hover.

* event - browser event.
* currentData - the current data on which the mouse is hovering.

```js
(event, { currentData }) => {}
```

| type | required | default |
| ---- | -------- | ------- |
| func | false    | N/A     |

### inverseTooltip

Enable inverse tooltip styles.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### compact

Lowers the chart's minimum height for tighter containers.
Supports containers as small as \~100px with a single-row, non-wrapping legend.
Legends that wrap to multiple rows need extra height beyond that.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

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