Looker visualization components are a suite of React-based components that are available in the open source @looker/visualizations package.

Visualization components accept a query ID from a Looker Explore or a dashboard ID from a Looker dashboard and render a client-side visualization without an iframe.

These components can be used out of the box, customized, or treated as pure data formatters to pass cleaned data from a Looker Explore to facilitate building your own customized visualizations.

Looker visualization components are designed to be used in a React environment that has been authenticated with Looker’s API using the TypeScript/JavaScript SDK. That step is handled automatically when you build with the Looker extension framework.

Creating visualizations with Looker visualization components

Looker’s visualization components suite provides two high-level components for working with your data:

• Query — Handles the data fetching and loads the response into React context
• Visualization — Accepts the data that is returned by Query and uses configuration adapters to render the appropriately customized chart on a page

Currently, data can be rendered as the following chart types:

• Line
• Area
• Scatter
• Sparkline
• Single value
• Bar
• Column
• Table
• Pie

More chart types are in development.

To view the property tables for each chart type, visit the Visualization and Query property tables documentation page.

To view the available configuration options for each chart type, view the visualization playground on the Looker Developer Portal.

Why use visualization components?

Visualization components improve and simplify the process of rendering a visualization from Looker within an application, free up developer time, and give developers more options to customize and extend their visualizations from Looker.

• Improved embedding — Visualization components allow developers to embed a Looker visualization in an application without an iframe. This can improve performance, monitoring, and the ability to customize.
• Easy integration — Visualization components can then be combined with other components from @looker/components to create entirely new compositions and front-end experiences.
• Customization — It is easier to customize embedded visualizations when using visualization components than when using iframes. Additionally, with visualization components, developers can create highly customized applications much faster, without having to create a visualization layer from scratch.
• Simplification — Visualization components improve the portability of Looker visualizations and simplify interactions with the Looker API.

Installing visualization components

To get started, add the Looker Visualization Components NPM package:

• NPM: npm install @looker/visualizations
• YARN: yarn add @looker/visualizations

You’ll also need to satisfy a few peer dependencies — Looker/components, React, and Styled Components:

• NPM: npm install @looker/components react react-dom styled-components
• YARN: yarn add @looker/components react react-dom styled-components

Information on installing and using the visualization components package can be found in the README document, available in GitHub and NPM.

Next steps

• If you would like to create an embeddable visualization that responds to changes within the Looker UI, and therefore can be updated by Looker users other than app developers, follow the instructions on the Using visualization components and a dashboard ID to render a simple visualization documentation page.
• If you would like to create an embeddable visualization that that does not respond to changes within the Looker UI, follow the instructions on the Using visualization components and a query ID to render a simple visualization documentation page.
• Visualization components can do more than render and customize Looker’s native visualizations. They can also be used to render custom visualizations. The Using visualization components to build a custom visualization documentation page provides an example of that type of transformation and customization.
• To understand all the properties of the Visualization and Query components, refer to the Visualization and Query property tables documentation page.