Data Visualization Library

Still using the legacy data visualization library? You can access the documentation here. Legacy charts documentation

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

Overview

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

Architecture

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

Plots

The @keen.io/charts is set of reusable plots components built with React and D3. Charts are part of a @keen.io/widgets and @keen.io/dataviz packages that could 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 chart plot supports a lot of configuration options to adjust it to Your own needs.

Example

Line chart plot component

Storybook

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

01 Jan01 Feb01 Mar01 Apr01 MayHorizontal Title-60-40-20020406080100Vertical Title0000


Use cases


    

  •   React ecosystem front-end applications.
    • 

  •   Create 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 could be used to interact with charts plots.


Example


Storybook
No Preview
Sorry, but you either have no stories or none are selected somehow.
  • Please check the Storybook config.
  • Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Widget Title
 
Widget tag
Widget Subtitle
 
books
licenses
shops
users
01 Jan01 Feb01 Mar01 Apr01 MayHorizontal Title0102030405060708090Vertical Title0000


Use cases


    

  •   React ecosystem front-end applications.
    • 

  •   Build customer-facing dashboards and visualizations with set of production ready components.
    • 

  •   Use any data source to render widgets
    • 






DataViz


The @keen.io/dataviz is abstraction layer that connects Keen API with visualization components.
It allows to seamlessly embed and deliver metrics within your user interface with minimal effort.


Example


Line chart widget powered by Keen API analysis.



Storybook
No Preview
Sorry, but you either have no stories or none are selected somehow.
  • Please check the Storybook config.
  • Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.


Use cases


    

  •   Front-end ecosystems (Vanilla.js, React, Vue, Angular) that are targeted for 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.
    •