Toucan 3.0
YouPrep documentationHelp centerGet a demo
  • Welcome
    • 👋Welcome to Toucan
    • ⚙️Technical resources
      • ⚙️Toucan stack
      • Setup mode
        • Toucan SaaS mode
      • ⚙️Security
        • Application Security
        • Source Code Quality
        • Global Security Practices
        • Security of Docker Images
  • TUTORIALS
    • 📊Getting Started : Embedded Analytics
    • 🤓Advanced tutorials
      • Embedding a story with user attributes
        • Dynamic filter with user attributes
        • Dynamic Tables
        • Dynamic Database
        • Dynamic Host
      • Using the HTTP API connector in advanced use cases
      • Using advanced syntax for SQL queries
      • Merging filters with our tool
      • Deep customization chart (CSS)
        • Homepage customization
        • Chart customization
        • Dashboard customization
  • Data Management
    • 🧮Overview of Data In Toucan
    • 📡Datasources in Toucan
      • 🔌Managing Connectors
        • 🔌Creating, editing and deleting a connector
        • 🔌Set up OAuth2 credentials for your platform
        • 🔌Setting up a connector
          • 🔌Generic Connectors
            • 🔌Setting up an HTTP API connector
            • 🔌Setting up an ODBC Connector
          • 🔌Database and data warehouse Connectors
            • 🔌Setting up an AWS Redshift Connector
            • 🔌Setting up a Snowflake Connector
            • 🔌Setting up a PostgreSQL Connector
            • 🔌Setting up a Google Big Query Connector
            • 🔌Setting up an AWS Athena connector
            • 🔌Setting up a MySQL connector
            • 🔌Setting up a MongoDB connector
            • 🔌Setting up a Microsoft SQL Server connector
            • 🔌Setting up an Azure SQL connector
            • 🔌Setting a Databricks Connector
            • 🔌Setting up a ElasticSearch Connector
            • 🔌Setting up a Clickhouse Connector
          • 🔌Online services connectors
            • 🔌Setting up a Sharepoint Connector
            • 🔌Setting up a Google Sheets Connector
            • 🔌Setting up a Salesforce Connector
            • 🔌Setting up a Hubspot Connector
          • 🔌Setting up an AWS S3 connector
      • 🗄️Managing remote file storages
        • 🗂️Setting up a file storage
          • SFTP
        • 📄Create a dataset from a file
      • 📁Managing Files
        • 📁Adding, editing and deleting local files
        • 📂Using advanced file settings
        • 📁Adding and combining remote files in Toucan
    • 🔢Datasets in Toucan
      • 🔢Stored and Live Datasets
      • 💿Managing datasets
        • 🔢Creating datasets
        • 🔢Editing, Duplicating and Deleting a dataset
        • 🔢Refreshing and Publishing Datasets
        • 📈Optimize data performance
        • 🗂️Adding indexes to stored datasets
        • 👩‍💻Code mode and single mode
      • 🛑Setting permissions on dataset
      • 🗃️Maintaining Data
        • 🗃️Tagging datasets
        • 🗃️Identifying datasets dependencies
        • 🗃️Set validation rules
    • 🧑‍🍳Preparing data
      • Overview of YouPrep™
        • 🎹Column header
          • Rename column
          • Duplicate column
          • Fill null values
          • Replace values
          • Sort values
          • Convert columns data types
        • Add
          • Add text column
          • Add formula column
          • Add conditional column
        • Filter
          • Delete columns
          • Keep columns
          • Filter rows
          • Top N rows
          • ArgMax
          • ArgMin
        • Aggregate
          • Group by
          • Add total rows
          • Hierarchical rollup
          • Get unique groups/values
        • Compute
          • Compute evolution
          • Cumulated sum
          • Percentage of total
          • Rank
          • Moving average
          • Compute statistics
          • Absolute value
        • Text
          • Concatenate
          • Split column
          • Extract substring
          • To lowercase
          • To uppercase
          • Compare text columns
          • Trim spaces
          • Replace text
        • Date
          • Convert text to date
          • Convert date to text
          • Extract date information
          • Add missing dates
          • Compute duration
          • Normalize date granularity
        • Reshape
          • Pivot
          • Unpivot
          • Waterfall
        • Combine
          • Append datasets
          • Join datasets
        • Geo
          • Geographic dissolve
          • Geographic hierarchy
          • Geographic simplify
          • Prepare geo data (with basemap)
      • YouPrep™ Native SQL
      • Hybrid pipeline
    • ➿Managing variables in Toucan
      • ➿Variables hub
      • ♈Use variables in YouPrep™
      • ➿Easy reference to variables
    • 🧞Using advanced data concepts
      • 🧞Data personnalisation with user attributes
        • Connector setup with a user attribute
        • Database selection with a user attribute
        • YouPrep data filtering with a user attribute
        • Filter data in SQL with a user attribute
      • 🧞Advanced syntax for variables
      • 🧞Data cache
  • Visualizations and Layouts
    • 📺Apps
      • 📺Managing Apps
        • ➕Creating Apps
        • 📄Duplicating Apps
        • 🖨️Publishing Apps
        • 🚮Deleting Apps
        • ✍️Editing within an App
      • 🖌️Customizing Apps
        • Customizing chart color elements
        • Customizing the app's font
        • Adding Assets
        • Adding Glossary
        • Setting up, Managing and testing custom visibilities
        • Customizing the "no data error" message
        • Creating a dynamic background based on an Filter's column
      • 🏠Home
        • Creating the Home
        • Creating Tiles
          • Tile Dynamic Value
          • Tile Leaderboard
          • Tile Line
          • Tile Scorecard
          • Tile Bullet
          • Tile Heatmap
          • Tile PDF
          • Tile Video
          • Tile Image
          • Tile Text
          • Tile HTML
          • Tile Separator
      • ✨Stories
        • Creating a Story
        • KPIs
        • Narrative
        • Crossfilter
      • 📽️Filters
        • Managing Filters
          • Creating, reusing and editing Filters
          • Applying Filters
          • Unpinning and deleting Filters
        • Type of Filters
          • Dropdown
          • Checkboxes
          • Buttons
          • Date Range
          • Hierarchical
          • Slider
        • Templating from Filters' values
        • Dependant Filters
      • 📈PDF Report
      • 🎡Datawall
      • 🏗️Dashboard Builder
        • Create a Dashboard Builder
        • Embed a Dashboard Builder
        • Dashboard export options
      • 🌟MyFavorites
    • 📊Creating Visualizations
      • 🤩Viz Gallery
        • ✨New Viz Designs
          • Barchart
          • Barlinechart
          • Bubblechart
          • Circularchart
          • Heatmap
          • Leaderboard
          • Linechart
          • Stacked Barchart
          • Tablechart
        • 📁Legacy Viz Designs
          • Bulletchart
          • Funnelchart
          • Gantt chart
          • HTML
          • Leaderboard Centered Average
          • Mapchart
            • Configure a drill
          • Mediachart
          • Radarchart
          • Timeline
          • Versuschart
          • Waterfallchart
          • Score Card
      • 🧠Common Chart Configuration
      • 💅Customizing chart colors
      • 🧞‍♂️Advanced chart configuration
        • Templating from chart's dataset
        • Add units, precisions and sentiments
        • Adding Tutorials
        • Add sparklines
        • Navigate with stories
        • Group informations in your stories
        • Multiple Charts in One Story
        • Manage dates
        • Customize tiles' sources
        • Add stars to tiles' title
        • Manage data order in your tiles
        • Navigate with tiles
    • 👩‍💻Embedding
      • 🔐Authentication
      • 🖇️Integration
        • Generate and manage embeds
        • Customize embeds
        • Embedding a Toucan App Using iFrames
        • Passing Extra Variables to Your Toucan Embed
      • ⚙️Embed SDK
        • Embed SDK Authentication
      • ❓FAQ
    • 🙋Self-Service
      • Self-Service Dashboard
        • The embedded Self-Service Dashboard
        • The in-platform Self-Service Dashboard
      • Self-service PDF Report
  • Collaboration
    • ⏰Creating alerts
    • 📧Managing notifications
    • ➕Enriching a story with descriptions
    • 💌Sharing content
    • 💬Adding comments to stories
  • Administration
    • ⚙️Instance Management
      • ⚙️Managing operations in SaaS
      • ⚙️Customizing your instance (whitelabel)
    • 👥Managing Users
      • 👥Users
      • 👥Managing user groups
      • 👥Managing user properties
      • 👥Setting up permissions and visibilities
    • 🌐Managing languages in Toucan (internationalisation)
    • 📈Monitoring Engagement with User Analytics
      • 🎛️How to Filter your User Analytics?
      • 🖥️Understanding your User Analytics Dashboards
  • Additional Ressources
    • 📚External documentation
    • 🚁Support for App-builders
    • 🆕Latest releases
      • 🎁2025 Releases
      • 🎁2024 Releases
      • 🎁2023 Releases
    • 🔧Troubleshooting
      • Troubleshoot:: DataHub
      • Cross-Site Cookies
      • How to :: read the inspector error
      • How to :: troubleshoot the toucan way
Powered by GitBook
On this page
  • 🧭 Overview
  • ⭐ Key Features
  • Configuration

Was this helpful?

  1. Visualizations and Layouts
  2. Creating Visualizations
  3. Viz Gallery
  4. New Viz Designs

Bubblechart

Last updated 15 days ago

Was this helpful?

🧭 Overview

The Bubble Chart is a multi-dimensional chart type used to visualize relationships between three or more variables within a two-dimensional space. Each data point is represented as a bubble positioned along the X and Y axes, with its size—and optionally color or opacity—representing additional values.

This chart type is ideal for scenarios where understanding the interplay between variables is essential and when a simple scatterplot would not capture the full nuance of the dataset.

📊 Example Use Case

  • Market positioning analysis (e.g. price vs. performance vs. market share)

  • Risk vs. impact assessments

  • Financial growth across regions or categories

  • Customer segmentation based on behavior and value

  • Product comparisons across multiple metrics

⭐ Key Features

  • Drill-down: Reveal more detailed data or navigate to subcategories.

  • Bubble size: Determines the bubble’s area or diameter based on a numeric value.

Configuration

Learn how to create a bubblechart using the new design with this step-by-step guide. Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.

Chart Configuration Step-by-Step

Option
How does it work?

Dimension

Bubble category

The bubble category corresponds to a column in your dataset, such as 'Product Type'.

Enable drill-down

Allows users to click on individual bubbles to reveal more detailed data or navigate to subcategories.

Show labels on bubbles

Displays names, categories, or values directly on bubbles for quick identification.

Measure

X-Axis

Represents the horizontal metric—typically a continuous or ordinal variable.

Y-Axis

Represents the vertical metric—used together with the X-axis to define bubble positioning.

Precision

Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.

Example: A value of 3.14159 will be displayed as 3.14 when using .2f formatting.

Unit

Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.

Sentiment

Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.

Note: Sentiments can be customized in the app theme.

Set bubble size

Adds a third dimension to the chart to visually represent an additional measure such as volume, count, or revenue.

Additional parameters

ID

Unique chart Id

Add complementary value

The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.

Add user chart guide

Lead your chart viewers through the narrative of your data.

Chart performance

Technical performance

Style Configuration

Option
How does it work?

Bubbles

Bubbles

Customize the bubble color to align with your branding preferences.

Bubble opacity

Controls the transparency of bubbles to reduce visual clutter and support overlapping data points.

This page provides a step-by-step guide for creating a barchart using the legacy design.

*Mandatory parameters

Section
Option
Configuration tutorial

Dataset*

Select the dataset used by the chart

X axis*

Column containing x axis value

Y axis*

Column containing y axis value

Legend

Display legend

Toggle to activate legend display

Legend

Additional info

Add another column for more information on the legend

Legend

Default selected bubble

Choose the first, last or the name of the label

Legend

Display a color gradient legend

Toggle to display a color gradient legend

Legend

Modify gradient color

Enter the min and max color (HEX (‘#…’) code)

Drill

Drill

The first bubble you see is the parent bubble.

Click on it to see it’s children

Drill

Level

Column containing parent or child level information

Drill

Group

Column containing the name of the parent bubbles to group them

Drill

Levels order

Enter the value of the parent bubbles as the 1st entry and the level value of the child bubbles as 2nd entry

Colored Zone

Quadrants

Divide your bubble chart in 4 colored zones

Colored Zone

Quadrants - Configuration type

Select the configuration type for quadrant:

  • hardcoded: static position of the quadrant

  • dynamic: depending on values within the dataset

  • from decile: typing figures between 1 to 10 to automatically divide the chart

Colored Zone

Quadrants - X

Column containing x axis value

Colored Zone

Quadrants - Y

Column containing y axis value

Colored Zone

Color coding

Add a color coding in the zones Input Order (4 max): top left, top right, bottom left, bottom right

Colored Zone

Quadrant legend

Add a legend in the zones Input Order (4 max): top left, top right, bottom left, bottom right

Colored Zone

Bisector

Divide your chart in 2 zonesDon’t forget to add a color coding and a legend!

Colored Zone

Bisector X axis

Column containing x axis value

Colored Zone

Bisector Y axis

Column containing y axis value

Colored Zone

Bisector - Color coding

Add a color coding in the zones Input Order (2 max): top left & bottom right

Colored Zone

Bisector - Zones legend

Add a legend in the zones Input Order (2 max): top left & bottom right

Enrich Chart

Bubble size

Column containing bubble size value

Enrich Chart

Bubble color

Column containing bubble color value/category: it can be a number or a text

Enrich Chart

Line

Add a line on top of your bubble chart to display an average, an objective of revenue...

Enrich Chart

Line - X axis

Column containing x axis value

Enrich Chart

Line - Y axis

Column containing y axis value

Display

Display bubbles' values

Toggle to display the value on the bubbles

Display

X axis scale

Use it to define the scale for the X axis: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)

Display

Y axis scale

Use it to define the scale for the Y axis: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)

Display

Bubble size scale

Use it to define the bubbles size scale: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)

Display

Overwrite default bubble's opacity

Display

Recycle bubbles colors

Reuse bubbles color when chart data changes (filters or requesters).

Display

Zoom

Toggle to enable zoom

Display

Overwrite the default min and max zoom of [1, 5]

Input a value from 1 to 5 to set a default zoom on the chart

Display

Size

Enter a proportion of the total screen (a number from 0 to 1)

Use on multiple charts only

Display

Mobile size

Enter a proportion of the total mobile screen (Use on multiple charts only): enter a number from 0 to 1

Display

Custom CSS class

Set a customm CSS class to target this specific chart with CSS

Tutorial

ID

Enter an ID.

Change the ID to display the tutorial again.

All tutorials with the same ID will be displayed only once.

Tutorial

Message

Enter your message. This will be displayed to your users

Tutorial

Always show this tutorial

By default the tutorial is shown once only

📊
🤩
✨