Use Muze Studio in Thoughtspot

General Availability

Muze Studio is now Generally Available (GA) from release 26.2.0

You can now create your own charts inside ThoughtSpot using Muze Studio. With Muze studio, you can use the Muze library to create a chart in any Answer. Muze is a charting library that supports a lot of different chart types and customizations. For information about Muze, see Introduction to Muze.

If you're a developer, you can use the code editor to create a new chart type in an Answer by writing the code. Using the chart library API, you can create complex charts with very few lines of code. Though the chart is available only to an individual Answer, other users can make a copy of the Answer and modify it to reuse the same chart type.

You also can use any of the available charts in the Muze chart library. For more information, see Muze chart gallery.

The code editor comprises three components:

• The JavaScript editor, where you can use the API to render complex charts.
• The CSS editor, where you create your chart's look and feel by applying different styles using available classes in CSS.
• The HTML editor, where you can add the chart container, structure the layout, and add additional elements like annotation.

As you make changes to a chart, you can click the Run button to see the results of your changes in the chart preview pane to the left.

JavaScript editor

The following APIs and data are available in the JavaScript editor:

• Muze library: contains the exhaustive API to create different kinds of charts, composing multiple layers in the same chart, cross-interaction in multiple canvases, and more.
• Data and DataModel: The data coming from a Sage search query is available in the editor. Muze also provides an in-memory data-manipulation component called DataModel which you can use to add filters, selection, group-by, and more, allowing you to structure the data to render very specific charts.
• Color palettes: The color that is used at the global level of the entire application uses the color API, so that you can use it in your chart to match the color and styles used in other chart types. By default, it uses the cluster-wide color palette that is defined by the customer just like other charts.
• Measure Names and Measure Values: Use these virtual columns to create multi-measure visualizations like pivot tables by transforming multiple measures into a single dimension-measure pair.
• Formatters: Provides NumberFormatter for currency, decimal, and percentage values with auto-scaling (K, M, B) support, DateFormatter for flexible date and time formatting, and SplitByFormatter for applying different formatters to different categories in your data.
• Conditional Formatting: Dynamically change colors of chart elements based on data values using conditional functions in the color encoding to highlight thresholds, performance levels, or category-based distinctions.
• Operators: Provides utility operators including share() for creating composed variables from multiple fields and html for sanitizing HTML strings in titles and tooltips.

For more information about the Muze API, see: Muze API reference.

CSS editor

In the CSS editor, you can style the container for your chart.

For details on how you can style your chart, see Styling your charts in the Muze documentation.

HTML editor

In the HTML editor, you add a container element for your chart. If you need multiple charts, you can add additional container elements. The <div> tags define the container where the visualization appears.

Getting started

To create a native chart using Muze Studio, do the following:

1. Create an Answer or open an existing one.
2. Click the Change visualization button .
3. In the Custom section at the bottom of the Chart panel, click Muze Studio.
4. A bar chart appears, by default.
5. In the upper-right corner of the chart preview pane, click the code editor button .
6. The code editor panel opens, with the JavaScript tab selected and the default code for the chart.
7. Make any changes you want to the existing code, or use code for any of the charts in the Muze chart library.
8. As you make changes, click the Run button to see the changes to your chart in the preview pane.
9. After you finish, click the Save button to save your chart. If your answer is already pinned to a Liveboard, you can click the Pin button, to publish your changes to the Liveboard.

🔧 Troubleshooting: Muze Studio not loading or displaying errors?

If you encounter issues with Muze Studio not loading properly or displaying unexpected errors, please verify that the required domain is whitelisted in your ThoughtSpot configuration.

For ThoughtSpot Embedded (TSE) users:

1. Navigate to Developer → Security settings
2. Click Edit
3. Under Permitted iFrame domains, add:

   *.pdom.thoughtspot.com
   

4. Click Save Changes

For ThoughtSpot Analytics (TSA) users:

Please contact ThoughtSpot Support for assistance with domain whitelisting.