Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _docs/v0.62/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ Metabase's reference documentation.
- [Visualizing data](./questions/visualizations/visualizing-results)
- [Box plots](./questions/visualizations/box-plot)
- [Combo charts](./questions/visualizations/combo-chart)
- [Custom visualizations](./questions/visualizations/custom)
- [Detail](./questions/visualizations/detail)
- [Funnel charts](./questions/visualizations/funnel)
- [Gauge charts](./questions/visualizations/gauge)
Expand Down
6 changes: 6 additions & 0 deletions _docs/v0.62/configuring-metabase/fonts.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,12 @@ raw.githubusercontent.com/${user}/${repo}/${branch}/${path}

Note that in the raw link, there is no `/blob/` directory in the URL.

### Custom fonts and Content Security Policy

When you add a custom font hosted on another domain, Metabase automatically allows that domain in the browser's Content Security Policy for fonts. You don't need to configure anything for the font to work.

If you don't add any custom fonts, Metabase only allows fonts served from your own instance.

### Supporting multiple languages

To support multiple character sets, for example both Latin and Cyrillic, you'll need to merge font files.
Expand Down
4 changes: 3 additions & 1 deletion _docs/v0.62/configuring-metabase/settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,11 @@ When on, Metabase restricts the browser's Content Security Policy so images can

By default, images from any domain are allowed.

You must turn on this setting to enable [Custom visualizations](../questions/visualizations/custom). While custom visualizations are enabled, you can't turn it back off.

## Allowed domains for images

When the [Restrict image domains](#restrict-image-domains) setting is on, Metabase will only allow images served from this Metabase instance, and any domains listed here.
When the [Restrict image domains](#restrict-image-domains) setting is on, Metabase will only allow images served from this Metabase instance, and any domains listed on this page.

Leave this input empty to only allow images hosted by your Metabase instance.

Expand Down
4 changes: 4 additions & 0 deletions _docs/v0.62/configuring-metabase/start.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ Cache query results for faster loading times.

Upload custom maps to your Metabase.

## [Custom visualizations](../questions/visualizations/custom)

Add your own chart types by uploading visualization plugins.

## [Customizing the Metabase Jetty webserver](./customizing-jetty-webserver)

Set SSL and port settings for the Jetty webserver.
438 changes: 438 additions & 0 deletions _docs/v0.62/developers-guide/custom-visualizations.md

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions _docs/v0.62/developers-guide/start.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ This guide contains detailed information on how to work on Metabase codebase.
- [Community drivers](./community-drivers)
- [Guide to writing a driver](drivers/start)

## Customizing Metabase

- [Building custom visualizations](./custom-visualizations)

## Metabase documentation

- [Developing Metabase documentation](./docs)
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 94 additions & 0 deletions _docs/v0.62/questions/visualizations/custom.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
---
version: v0.62
has_magic_breadcrumbs: true
show_category_breadcrumb: true
show_title_breadcrumb: true
category: Questions
title: 'Custom visualizations'
source_url: 'https://github.com/metabase/metabase/blob/master/docs/questions/visualizations/custom.md'
layout: new-docs
summary: 'Add your own chart types to Metabase by uploading visualization plugins built with the Custom Visualizations SDK.'
---

# Custom visualizations

{% include plans-blockquote.html feature="Custom visualizations" %}

You can build new chart types and add them to Metabase. Here's a calendar heatmap:

![Calendar heatmap custom visualization](../images/custom-viz-calendar-heatmap.png)

Here's the [code for that calendar heatmap viz](https://github.com/metabase/custom-viz-calendar-heatmap).

This page covers how to add a custom visualization to your Metabase. To _create_ a new custom visualization, see [developing a custom visualization](../../developers-guide/custom-visualizations).

## Enabling custom visualizations

### Restrict image domains first

Before you can turn on custom visualizations, you need to enable [Restrict image domains](../../configuring-metabase/settings#restrict-image-domains). A custom visualization runs third-party JavaScript in your Metabase. By restricting image (and font) domains, you limit where that code can load assets from, which narrows the ways a plugin could leak data through outbound asset requests. See [Only add plugins you trust](#only-add-plugins-you-trust).

While custom visualizations are enabled, you can't turn **Restrict image domains** back off. You'll need to first disable custom visualizations.

### Turn on custom visualizations

To turn on custom visualizations, go to **Admin** > **Settings** > **Custom visualizations** and click **Enable custom visualizations**.

You can also enable (or disable) custom visualizations with the [`MB_CUSTOM_VIZ_ENABLED`](../../configuring-metabase/environment-variables#mb_custom_viz_enabled) environment variable, or with the `custom-viz-enabled` key in a [configuration file](../../configuring-metabase/config-file).

## Adding a custom visualization

Once you've [built the custom visualization](../../developers-guide/custom-visualizations):

1. In Metabase, go to **Admin** > **Settings** > **Custom visualizations** > **Manage visualizations**.
2. Click **Add** and drag the `.tgz` file into the upload area (or click to browse for it).
3. Click **Add visualization**.

- Bundles must be smaller than 5 MiB.
- Each plugin lists the Metabase versions it supports (for example, "Requires Metabase >=1.62"). If your Metabase version isn't in that range, Metabase rejects the upload and tells you which version the plugin needs.
- The **Manage visualizations** page shows each plugin's icon, name, the first eight characters of the bundle's hash, and its required Metabase version range, so you can tell which version is installed.

## Using a custom visualization

On a question, dashboard or document card, open the visualization sidebar (the **Visualization** button), and look for the **Custom visualizations** section. Pick your visualization the same way you'd pick a line chart or a table, and voilà, there's that gondola line chart you needed:

![Gondola line chart](../images/gondola-line-chart.png)

If a custom visualization can't render the current query results (for example, if the query is missing a column the visualization needs), Metabase shows the error message from the plugin so you can adjust the query or pick a different chart.

Custom visualizations behave like built-in charts in most places:

- **Settings.** Click the **gear** icon in the visualization sidebar to change the visualization's settings. A plugin defines its own setting tabs: each setting names the section it belongs to.
- **Dark mode.** Plugins that use Metabase's colors adapt to [dark mode](../../people-and-groups/account-settings#theme) automatically.
- **Icons.** A custom visualization shows its own icon in the visualization picker, and questions that use it show that icon in collections and bookmarks.

## Managing custom visualizations

_Admin > Settings > Custom visualizations > Manage visualizations_

- **Disable a visualization.** Any question, dashboard card, or document card that used the visualization falls back to the default visualization for that query's results. If you re-enable the plugin, those cards will go back to using the custom visualization.
- **Replace a bundle.** Upload a new `.tgz` to ship an updated version of a plugin. The new bundle's manifest `name` _must_ match the existing plugin's identifier, so questions that already use the visualization keep working.
- **Remove a visualization.** Cards that used the custom viz fall back to the default visualization.

## Exports

- **Dashboard subscriptions and alerts don't use custom visualizations**. Cards that use custom visualizations will fall back to a default visualization for the card's data shape.
- **PDF exports of dashboards include custom visualizations**.
- **Custom visualizations can support PNG export**, but only if its developer turned on PNG export for that plugin. PNG export is off by default.

## Only add plugins you trust

A custom visualization plugin runs JavaScript in your Metabase. Only upload plugins from sources you trust (like plugins you've built yourself, or have vetted).

Metabase runs custom visualizations in a sandbox to limit what a plugin can do:

- A plugin renders inside an isolated container and can't reach the rest of the Metabase app.
- A plugin can't call Metabase's APIs or make network requests.

While this sandboxing limits the damage a plugin can do, you still need to review the code.

## Further reading

- [Building custom visualizations](../../developers-guide/custom-visualizations)
- [Visualization overview](./visualizing-results)
- [Appearance](../../configuring-metabase/appearance)
5 changes: 5 additions & 0 deletions _docs/v0.62/questions/visualizations/visualizing-results.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,10 @@ If you have a bar chart like Count of Users by Age, where the x-axis is a number

![Scatter](../images/scatter.png)

## Custom visualizations

On [Pro and Enterprise plans](/pricing/), admins can add [custom visualizations](./custom): chart types you build with the Custom Visualizations SDK and upload to Metabase. Once a custom visualization is installed, it shows up in the visualization picker alongside the built-in charts.

## Styling and formatting data in charts

![Chart formatting options](../images/chart-formatting-options.png)
Expand All @@ -188,5 +192,6 @@ See also [Formatting defaults](../../data-modeling/formatting).
## Further reading

- [Charts with multiple series](../../dashboards/multiple-series)
- [Custom visualizations](./custom)
- [Appearance](../../configuring-metabase/appearance)
- [BI dashboard best practices](/learn/metabase-basics/querying-and-dashboards/dashboards/bi-dashboard-best-practices)
6 changes: 6 additions & 0 deletions _site/docs/v0.62/configuring-metabase/fonts.html
Original file line number Diff line number Diff line change
Expand Up @@ -6361,6 +6361,12 @@ <h3 id="hosting-fonts-on-github">Hosting fonts on GitHub</h3>

<p>Note that in the raw link, there is no <code class="language-plaintext highlighter-rouge">/blob/</code> directory in the URL.</p>

<h3 id="custom-fonts-and-content-security-policy">Custom fonts and Content Security Policy</h3>

<p>When you add a custom font hosted on another domain, Metabase automatically allows that domain in the browser’s Content Security Policy for fonts. You don’t need to configure anything for the font to work.</p>

<p>If you don’t add any custom fonts, Metabase only allows fonts served from your own instance.</p>

<h3 id="supporting-multiple-languages">Supporting multiple languages</h3>

<p>To support multiple character sets, for example both Latin and Cyrillic, you’ll need to merge font files.</p>
Expand Down
4 changes: 3 additions & 1 deletion _site/docs/v0.62/configuring-metabase/settings.html
Original file line number Diff line number Diff line change
Expand Up @@ -6324,9 +6324,11 @@ <h2 id="restrict-image-domains">Restrict image domains</h2>

<p>By default, images from any domain are allowed.</p>

<p>You must turn on this setting to enable <a href="../questions/visualizations/custom">Custom visualizations</a>. While custom visualizations are enabled, you can’t turn it back off.</p>

<h2 id="allowed-domains-for-images">Allowed domains for images</h2>

<p>When the <a href="#restrict-image-domains">Restrict image domains</a> setting is on, Metabase will only allow images served from this Metabase instance, and any domains listed here.</p>
<p>When the <a href="#restrict-image-domains">Restrict image domains</a> setting is on, Metabase will only allow images served from this Metabase instance, and any domains listed on this page.</p>

<p>Leave this input empty to only allow images hosted by your Metabase instance.</p>

Expand Down
4 changes: 4 additions & 0 deletions _site/docs/v0.62/configuring-metabase/start.html
Original file line number Diff line number Diff line change
Expand Up @@ -6268,6 +6268,10 @@ <h2 id="custom-maps"><a href="./custom-maps">Custom maps</a></h2>

<p>Upload custom maps to your Metabase.</p>

<h2 id="custom-visualizations"><a href="../questions/visualizations/custom">Custom visualizations</a></h2>

<p>Add your own chart types by uploading visualization plugins.</p>

<h2 id="customizing-the-metabase-jetty-webserver"><a href="./customizing-jetty-webserver">Customizing the Metabase Jetty webserver</a></h2>

<p>Set SSL and port settings for the Jetty webserver.</p>
Expand Down
Loading