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

Linechart

Last updated 22 days ago

Was this helpful?

๐Ÿงญ Overview

Line charts are used to display trends over time, track changes, and highlight patterns in continuous data. They provide a clear visual representation of data fluctuations, making it easy to identify upward or downward trends. Line charts simplify the analysis of temporal relationships, offering a straightforward way to visualize how data evolves, allowing for quick and accurate insights.

๐Ÿ“Š Example Use Case

  • Sales performance over time

  • Website traffic monitoring

  • Customer churn rate analysis

  • Product usage tracking

  • Financial market trends

  • Energy consumption monitoring

  • Employee productivity over time

โญ Key Features

Generally used for temporal data, the line chart is perfect for visualizing how values evolve over a continuous period.

๐Ÿ“ Example: Track the evolution of your sales throughout the year.

Line charts are ideal for displaying quantitative values over time, helping you:

  • Visualize trends and interconnections between data points.

  • Gain a global view of a specific period and assess growth or decline.

  • Identify patterns and make data-driven decisions based on historical trends.

๐Ÿ“Œ Tip: To keep your chart clear and readable, limit the visualization to a maximum of 3 lines.

Configuration

Learn how to create a linechart 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

X-Axis

The X-Axis corresponds to a column in your dataset, such as โ€˜Product Type' or 'Dateโ€™.

Categorize by line

This option enables you to add multiple lines to your chart, based on the values of a single column.

Change date format

You can change the display format by selecting an option from the dropdown. Common D3 formats are suggested. Note: Your column must be in a date format for this option to work.

Measure

Line Y-Axis

The Y-Axis represents a numerical column from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type.

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.

Show value on line

Displays all values above the line for easy visibility.

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?

Lines

Customize the line color to align with your branding preferences.

Add colored zones

You can use four different sentiment statuses (positive, warning, negative, and neutral) to create colored background areas by setting a minimum and maximum value, enhancing visual clarity. There are no limits to the number of color zones you can add.

Note: Sentiments can be customized in the app theme.

Enable color gradient

Configure the color gradient to adjust the intensity of a single color, enhancing visual depth and emphasis.

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

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

๐Ÿ“Š
๐Ÿคฉ
โœจ
d3 time format