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 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
        • 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
        • Barchart
        • Barlinechart
        • Bubblechart
        • Bulletchart
        • Circularchart
        • Funnelchart
        • Gantt chart
        • Heatmap
        • HTML
        • Leaderboard
        • Leaderboard Centered Average
        • Linechart
        • Mapchart
          • Configure a drill
        • Mediachart
        • Radarchart
        • Tablechart
        • Timeline
        • Versuschart
        • Waterfallchart
        • Score Card
        • Stacked Barchart
      • 🧠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
      • Self-service PDF Report
  • Collaboration
    • ⏰Creating alerts
    • 📧Managing notifications
    • ➕Enriching a story with descriptions
    • 💌Sharing content
    • 💬Adding comments to stories
  • Administration
    • Page
    • ⚙️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
  • ✨ New Chart Design Available
  • Purpose & Application
  • Key features
  • Configuration

Was this helpful?

  1. Visualizations and Layouts
  2. Creating Visualizations
  3. Viz Gallery

Linechart

Last updated 5 months ago

Was this helpful?

✨ New Chart Design Available

What's new?

  • Interactive Legend with Filterable Checkboxes

  • Consistent Data Labels Hover

  • Enhanced Tick Management & Zoom Tool


Purpose & Application

Generally, this visualization is used for temporal data.

📝 For example, I want to see the evolution of my sales across the year.

Linecharts are used to display a quantitative value, over a continuous duration.

Concerning this chart therefore, most often, it is used to show trends and interconnections. Linechart also helps to provide a global vision of a given interval, to assess its growth over a certain period of time.

When using a line chart, it is advisable to limit the chart to 3 lines, to keep the reading simple and easy.

Key features

What makes this chart a killer story?

  • Link 2 charts! The linechart is the perfect master chart. While navigating on your timeline, update the second chart of your story 🔄

  • Events! You have context or event explaining a change in the trend you are visualizing? Add events to your linechart 🗓️

For example, we are looking at the evolution of the number of fans of a social media page. We can see an impressive increase in the number of fans. Why?

What happen to make this sudden popularity increase? Oh yes! The community management campaign! Let your user know.

  • Color coding 🚦 makes it easy to identify best/worst performer without even reading the numbers. Add sentiment zones to your linechart to identify easily when you’ve reached a critical value

For example, I’m tracking the usage rate of new device I gave to my sales team. I can set up an expected usage rate range and analyze day by day the usage of my team on the field.

Configuration

New Chart Design

*Mandatory parameters

Section
Option
Configuration Tutorial

Dataset*

Select the dataset used by the chart

X Axis*

Your value for the X Axis

Y Axis*

Your value for the Y Axis

Multi-linechart

Series label

Display label based on column containing lines name

Enrich chart

Color zones

Add colored zones. You can add multiple zones one by one

Enrich chart

Color Zones - Min And Max Value

Enter the minimum and maximum value of your colored zone based on whether a fixed value, from a column or a dynamic value

Enrich chart

Color Zones - Choose a sentiment color

Choose what color will be displayed in the zone, you can change color coding in the Color Scheme menu

Ticks format

X axis date format

Display

Show all values on line

Display all the values on your linechart. This is not recommended because of display issues that may cause

Display

Toggle gradient

By default the toggle is activated so that your line chart gets a color gradient

Previous Chart Design

*Mandatory parameters

Section
Option
Configuration Tutorial

Dataset*

Select the dataset used by the chart

X Axis*

Your value for the X Axis

Y Axis*

Your value for the Y Axis

Legend

Display Legend

Toggle the legend display

Legend

Reflect Value Order In The Legend

Sort you values in the legend

Legend

Maintain Selection

Keep the selection when clicking on a point

Legend

Legend For X Axis

Display a legend for your X Axis

Legend

Legend For Y Axis

Display a legend for your Y Axis

Legend

Additional Info

Display contextual in-depth info

Legend

Default Selected Value

Display first, last or name of the X Axis value

Multi-Linechart

Add multiple lines to your linechart

Multi-Linechart

Series Label

Display label based on column containing lines name

Multi-Linechart

Groups Additional Info

Display label based on column containing lines name but will be display in the legend

Multi-Linechart

Series Order

Order based on a column, an advanced order or a custom order. For legend display only

Sort

X Axis Order

Order based on a column, an advanced order or a custom order. Use this if your X Axis is not a time dimension

Enrich Chart

Activate options to give more info on your linechart

Enrich Chart

Always Display All Events

Display all your configured events all the time

Enrich Chart

Events

Add contextual info on your line. As the user navigates, some text can pop up on specific dates

Enrich Chart

Events - X

Display a text for your X Axis value. Should match the format of the X Axis. Choose between text and number configuration type

Enrich Chart

Events - Description

Enter your event description. Will be display when hovering the element

Enrich Chart

Events - Series Label

Enter your series label. Use it for multiple linechart. By default the event is displayed on all the lines

Enrich Chart

Color Zones

Add colored zones. You can add multiple zones one by one

Enrich Chart

Color Zones - Min And Max Value

Enter the minimum and maximum value of your colored zone based on whether a fixed value, from a column or a dynamic value

Enrich Chart

Color Zones - Zone Legend

Enter a text for your zone legend that will be display in your colored zone

Enrich Chart

Color Zones - Sentiment Color

Choose what color will be displayed in the zone, you can change color coding in the Color Scheme menu

Enrich Chart

Color Zones - Label Position

Choose where to display the label of your colored zone

Enrich Chart

Color Zones - Display Color Zone In Legend

Choose whether to color your legend based on your colored zone

Enrich Chart

Color Zones - Always Display The Color Zone

Always display the color zone even if all the values are below or above it

Enrich Chart

Dashed Lines

Choose the line which will be dashed. You can add dashed lines manually or based on a column

Ticks Format

X Axis Date Format

Ticks Format

Ticks Display - Display All X Ticks

Will overwrite smart ticks display

Ticks Format

Ticks Display - Display All Y Ticks

Will overwrite smart ticks display

Ticks Format

Ticks Display - Hide Start And End Ticks

Will hide start and end ticks

Ticks Format

Ticks Display - Show Ticks Indicator

Will show ticks indicator

Ticks Format

Ticks Display - Add X Ticks Manually

Choose the X values to display as ticks

Display

Activate options to customize your linechart display

Display

Smooth Line

Interpolate between the points to smooth the line

Display

Don't Adapt Y Axis

Resize the y axis when filtering

Display

Display Missing Value

Cut the line instead a joining point when a value seems missing

Display

Recycle Line Color

Reuse line color when chart data changes (when filtering)

Display

Y Axis Baseline

Set the Y value on which to position the X Axis. By default, it is set to 0. You can set a custom baseline, use a column from your current dataset or an automatic baseline

Display

Scale

Enter two value to define the minimum and maximum scale on which you want to display the linechart

Display

Show All Values On Line

Display all the values on your linechart. This is not recommended because of display issues that may cause

Display

Size

Use on multiple chart only. Enter a number from 0 to 1

Display

Mobile Size

Use on multiple chart only. Enter a number from 0 to 1

Display

Custom CSS Class

Set a custom 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 display this tutorial

By default the tutorial is shown once only

Customize the date display on the X AXis. Use for this ex. %Y-%m-%d.

Customize the date display on the X AXis. Use for this

📊
🤩
d3 time format
d3 time format
Streamlined Smart Editor Options