Looker includes a robust list of native visualization types, letting you chart your data in a variety of ways. If you need a type of chart that is not included in Looker’s native visualization types, Looker provides several ways to add custom JavaScript visualizations to your Looker instance:

1. Add a visualization parameter to your LookML project’s manifest file to add custom visualizations directly to your LookML project. See the visualization parameter documentation page for more information.
2. Install a visualization from the Looker Marketplace. With the Looker Marketplace feature enabled, you can install Looker Marketplace plug-ins, including visualization types that you can add to Looker’s native visualization library. See the Using the Looker Marketplace documentation page for more information about installing plug-ins from the Looker Marketplace. See the Developing a custom visualization for the Looker Marketplace documentation page for information about creating a visualization that can be added to the Looker Marketplace and accessed by other Looker users.
3. Use the Visualizations page in the Platform section of Looker’s Admin menu to install and administer custom JavaScript visualizations from Looker’s custom visualizations repository.

This page describes how to add custom JavaScript visualizations using the Visualizations page in the Looker Admin panel.

Custom visualizations are a community-supported effort. Looker’s support team does not troubleshoot issues relating to custom visualizations or your custom visualization code. For tracking and closing out bugs, please use GitHub issues in the custom visualization’s repository, or visit Looker’s Community Forums or Help Center for how-to articles, conversations, and tips regarding custom visualizations.

Supported visualizations are available for download through the Looker Marketplace.

Viewing a list of custom visualizations

To ensure full functionality of downloaded visualizations, admins for customer-hosted deployments should make sure to install the appropriate version of the Chromium renderer.

The Visualizations page in the Platform section of Looker’s Admin menu lists all the custom visualizations that have been added to your Looker instance through any of the methods described above:

The list includes the following columns:

• ID: The unique ID assigned to the custom visualization. This value is assigned either in the JavaScript code, or when you add or edit a visualization using the Admin page, or in the visualization’s id parameter when you add a visualization using the LookML project manifest file.
• Label: The name given to the visualization type in the Looker visualization menu. This value is assigned when you add or edit a visualization using the Admin page, or in the visualization’s label parameter when you add a visualization using the LookML project manifest file.
• Main: The URI of the visualization’s main JavaScript code. This value is assigned when you add or edit a visualization using the Admin page, or in the visualization’s url parameter when you add a visualization using the LookML project manifest file.
• Actions: Buttons to edit or delete the visualization configuration. These buttons are not shown for visualizations added using the LookML project’s manifest file. To edit these visualizations, go to the LookML project’s manifest file and edit the visualization parameter directly.

Adding a new custom visualization

You can find a list of Looker’s Viz Blocks in Looker’s Marketplace. Looker also maintains a library of custom visualizations for public use on this Looker GitHub page. You can find instructions for using Looker’s Visualization API to create your own visualization types on this Looker Github page.

Once you know which visualization you’d like to add to your instance, you can use the Visualizations page to add a custom visualization by clicking the Add Visualization button in the upper left corner of the page.

Looker displays the New Visualization: page:

1. In the ID field, enter the unique ID of the visualization defined in the visualization JavaScript.

2. In the Label field, enter the name of the visualization to display in the Looker visualization menu. For example, this is how Looker displays a custom visualization labeled “Sankey”:

   

   • Click the ... three-dot icon from the visualization menu bar to access the custom visualization.
   • Once the visualization is selected, the name of the visualization appears on the visualization menu bar.

3. In the Main field, enter the URI of the visualization’s main JavaScript file to point Looker to your JavaScript code repository.

4. If the site hosting your custom visualization code uses a subresource integrity (SRI) hash for verification purposes, enter the SRI hash in the SRI Hash field. This field can be found under Advanced options. Looker’s custom visualization hosts do not use an SRI hash.

5. In the Dependencies field, enter the URIs of any other files that the visualization JavaScript is dependent upon, and click Add. You can enter multiple URIs separated by commas, or you can add multiple URIs one at a time. The Dependencies field can be found under Advanced options.

6. Click Save.

Once the visualization has been added, you will see it as you’ve labeled it in the visualization menu in an Explore. You can use the new visualization type like any of Looker’s existing visualization types.

Editing a custom visualization

To edit an existing visualization, click the Edit button to the right of the visualization. Looker displays the same page that you use to add a visualization (described above), but with the relevant information already filled in. Make any desired changes, then click Save.

Deleting a custom visualization

To delete a visualization, click the Delete button to the right of the visualization and then click OK in the confirmation box. This removes the visualization from Looker, but will not affect anything in the visualization’s external code repository.

Deleting a visualization disables any Looks or dashboards that use that visualization type. You can correct that by adding back the deleted visualization with the same visualization ID.