As a transitional step, this site will temporarily be made Read-Only from July 8th until the new community launch. During this time, you can still search and read articles and discussions.

While the community is read-only, if you have questions or issues requiring TIBCO review/response, please access the new TIBCO Community and select "Ask A Question."

You will need to register or log in or register to engage in the new community.

Visual Design Best Practices for TIBCO Spotfire®

Last updated:
12:36am Mar 30, 2020

Even the most sophisticated TIBCO Spotfire® dashboards, addressing all technical requirements of the customer, will not be effective unless their visualdesign is well coordinated.

Dashboards need to be carefully designed to be visually appealing and clearly deliver information to their end users.  

The materials gathered in the subpages will help you design beautiful and effective Spotfire analyses.

Dashboard Design Best Practices Examples

LARGE TITLES on each page:


Calculated values in text area to display KPI`s:


DARK THEMES for simple dashboard:




CUSTOM DESIGN for customer:



Relevant Filter in text areas:

BOOKMARKS as a guided through the analysis:

HTML to align controls in text areas:

Custom Themes

Here you can download Custom Themes and apply them to your Spotfire Analyses.

Click on the name of any Custom Theme below to download the US Homeless analysis styled in that theme.

You can then apply the theme to your Spotfire analysis through View -> Visual Theme -> Import Theme from File...

Creating a custom theme is only possible with the Analyst Client. As a business author you can change the themes between the defaults white or black however if the custom theme was created by the analyst you have the option custom as well. 

Gray Piece of Paper Theme

Burgundy Piece of Paper Theme

Gray Tile Theme

Gray and Gold Tile Theme

Dark Blue Piece of Paper Theme (Light)

Black Tile Theme

Gray Tile Blue Title Theme

Dark Blue Piece of Paper Theme (Dark)

Black Piece Of Paper Theme

Color Schemes

Here you can download pre-prepared color schemes and apply them to your visualizations in Spotfire.

Click on the colour schemes to download them as zip files.






    For instructions visit the following Spotfire help pages:

    • Color Schemes Overview: The entire setup of colors for a visualization is referred to as its color scheme. Which colors and threshold values you choose, as well as the color mode you select, are all part of a visualization's color scheme. The current color scheme of a visualization can be viewed in the legend, and on the Colors page of the Visualization Properties. This is also where you edit a color scheme.
    • Opening a Color Scheme: You can open a color scheme that has previously been saved to disk or to the library. You can also apply a color scheme from another visualization in the analysis, or open a document color scheme. The color scheme must be in the same scale mode as the visualization in which you want to use it.
    • Applying a Color Scheme to Another: When you have set up a color scheme for a visualization, you can apply it to another visualization, provided that the two visualizations are colored by a column in the same scale mode.
    • Saving a Color Scheme: You can save a color scheme for later reuse or to share it with others. If you save the color scheme to disk or in the library, you can use it in other analyses. If you save it as a document color scheme, you can use it again within the analysis. A document color scheme can be selected for a specific visualization in the analysis from the Colors page of the visualization properties. You can also select it as the default color scheme to use for a specific column as well as for new visualizations in the analysis. See Column Properties – PropertiesColumn Properties Descriptions, and Options – Visualization to learn more about using default color schemes.
    • Coloring Overview

    HTML in Text Areas

    Using HTML in Spotfire Text Areas is a great way to enhance the look and feel of your dashboards.



    • Title pane with KPIs: in this example, an HTML table is used to control the layout of the top pane of the dashboard, including a title, KPIs and a slider.

      Table boarder set to one:

      HTML lookup (click on the image to zoom in):


    • Aligned Text and Controls: In this example, an HTML table is used inside a text area to align text and Spotfire controls for a more readable and user friendly format.Also, a cellpadding attribute is used inside the  tag to control the distance between text and controls and the Text Area borders.



      Html lookup (click to get the html)



    • This customized html table is a good example how to put and align dynamic labels in a table.

      Link to dxp: Customized table


    • Scorecard Layout: This HTML code is used within a text area to align text and a Spotfire control in the middle of the box.

      HTML lookup:

    • You can usue other techniques such as Div and Section tags which are more commonly used on web pages. In combination with styles such as float or flex you can achieve modern layouts in a text area:

    Spotfire Design Cheat Sheet

    The Cheat Sheet is a one page document with checkboxes that will help you design beautiful, user-friendly dashboards. 

    Please download the pdf version or view the image below.


    Recommended Reading

    Disable rich-text

    Michael O'Connell

    Frank E Harrell Jr


    Edward Tufte

    • R (2001) [1983], The Visual Display of Quantitative Information (2nd ed.), Cheshire, CT: Graphics Press, ISBN 0-9613921-4-2.
    • (2001b) [1990], Envisioning Information, Cheshire, CT: Graphics Press, ISBN 0-9613921-1-8.
    • R (1997), Visual Explanations: Images and Quantities, Evidence and Narrative, Cheshire, CT: Graphics Press, ISBN 0-9613921-2-6.
    • (2003), The Cognitive Style of PowerPoint, Cheshire, CT: Graphics Press, ISBN 0-9613921-6-9.
    • (2006), Beautiful Evidence, Cheshire, CT: Graphics Press, ISBN 0-9613921-7-7.

    Stephen Few

    Jeff Johnson 

    • (2014), Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design: Morgan Kaufmann, Second Edition,  ISBN-13: 978-0124079144.

    Dona M. Wong

    • (2010), The Wall Street Journal Guide to Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures: W. W. Norton & Company; 1St Edition edition, ISBN-13: 978-0393072952

    Feedback (3)

    I cant get the .7z files to extract. Anybody else having this issue? I am using WinZip.

    byron.m.kelly 10:12am Mar. 18, 2019

    Hi dhowa,

    Thanks for leaving your feedback! I'm glad you like this content.

    If you have any questions on the Community content in the future, it is best to use the "Ask a Question" button found on the right-hand panel of every Community page (under the text "Haven't found what you are looking for?"). Enter your question and tag them as appropriate to make it easy to search. We have a team who monitors those questions to make sure that they get answered.

    To answer your question, yes. You can build the color schemes in Spotfire and export them. (You can also save the color scheme in the dxp as a document color scheme. It will then be accessible to visualizations within that dxp.) You can create a color scheme with categorical color mode and select the colors in the order you want. You would then save the color scheme for later use. When you later apply the saved color scheme to another categorical variable column, the color order you selected applies.


    Chia-Yui LEE

    TIBCO Data Science

    Chia-Yui Lee 2:10pm May. 25, 2017

    This is really great and awesome!.  Question when making the color schemes do you build them in spotfire then export them?  And do you just make sure they are in the correct order when you do so based on numbers or such then export that way to keep the colors in the order you want?

    dhowa 7:41am May. 19, 2017