# Data Visualization Library

Still using the legacy data visualization library? You can access the documentation [here](https://keen.io/docs/visualize/common-chart-examples/).

**Note:** Legacy data visualizations are no longer being supported. We recommend migrating to the new chart library by following this 3-minute video tutorial.

- [Data Visualization Library Migration Tutorial](https://www.youtube.com/watch?v=QHWXZAXZsxI&ab_channel=KeenIO)
- [Data Visualization Library Installation Tutorial](https://www.youtube.com/watch?v=P2L9m4HwEqg&ab_channel=KeenIO)

## Overview

This section explains how to leverage the Keen `visualization libraries` to create charts and metrics.

## Architecture

The data visualization library consists of three packages that could be used separately based on requirements.

### Plots

The `@keen.io/charts` is a set of reusable plot components built with [React](https://reactjs.org/) and [D3](https://d3js.org/).  
Charts are part of `@keen.io/widgets` and `@keen.io/dataviz` packages that can be used to seamlessly embed and deliver metrics within your user interface.

Charts plots theme could be fully customized by providing `theme` interface. Each of the chart plots supports many configuration options to adjust it according to your own needs.

##### Example

Line chart plot component

```

```

```

```

```

```

Horizontal Title-60-40-20020406080100Vertical Title0000

##### Use cases

- [React](https://reactjs.org/) ecosystem front-end applications.
- Create your own visualization library by using production-ready `@keen.io/charts` and your custom `React` components.
- Simple data visualizations that do not require additional features like _legend_, _filters_, etc.
- Use any data source to render plots.

* * *

### Widgets

The `@keen.io/widgets` package is a higher visualization layer that connects `@keen.io/charts` with other components that can be used to interact with chart plots.

##### Example

Storybook

```

```

```

```

```

```

Widget Title

Widget tag

Widget Subtitle

books

licenses

shops

users

Horizontal Title0102030405060708090Vertical Title0000

##### Use cases

- [React](https://reactjs.org/) ecosystem front-end applications.
- Build customer-facing dashboards and visualizations with a set of production-ready components.
- Use any data source to render widgets.

* * *

### DataViz

The `@keen.io/dataviz` is an abstraction layer that connects `Keen API` with visualization components.  
It allows for seamless embedment and delivery of metrics within your user interface with minimal effort.

##### Example

Line chart widget powered by `Keen API` analysis.

Storybook

```

```

```

```

```

```

##### Use cases

- Front-end ecosystems (Vanilla.js, [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Angular](https://angular.io/)) that are targeted for the browser.
- Embed visualizations on any website and user interface.
- Visualize events from `Keen API` without additional parsing and transformations.
- Deliver customer-facing dashboards and metrics with no time.