Flipside Docs
  • Welcome to Flipside!
    • Welcome to Flipside
    • Growth Services
    • Data
      • Choose your Flipside plan
        • Free
        • Builder
        • Pro
          • Get Started in Snowflake
          • Incremental Table Pattern
          • Copy Data from Snowflake to AWS
          • Copy Data from Snowflake to GCP
          • Copy Data from Snowflake to Azure
        • Snowflake Data Shares
          • Mounting a Snowflake Data Share
    • Earn
    • Community
  • Data
    • Flipside Data
      • Table Docs by Chain
      • Data Modeling Approach
      • Labels
        • Centralized Exchange Label Type
        • Decentralized Exchange Label Type
        • Operator Label Type
        • Chain Admin Label Type
        • Decentralized Finance Label Type
        • NonFungible Tokens Label Type
        • Games Label Type
        • Bridge Label Type
        • Decentralized Applications Label Type
        • Token Label Type
        • Flotsam Label Type
      • Tags
      • Table Freshness Targets
      • Contribute to Our Data
        • Contract Decoding & ABIs
        • How to Add Your Own Tags
        • Community Curation
          • Getting Started
            • Contribution Workflow
          • Model Standards
            • dbt Tips
          • PR Checklist
    • Data Products
      • Data Studio (SQL Analysts)
        • Get Started
          • Write/fork your first query
        • Flipside AI
        • Studio in Depth
          • Query Editor
            • Query Referencing
            • Pro Tips for Querying
            • Keyboard Shortcuts
            • Hex-to-Integer Function
          • Create a Chart
            • Advanced Visualization
          • Build a Dashboard
            • Markdown Reference
          • Team Accounts
        • Tutorials
          • How to Analyze Web3 Data
          • Video Tutorials
            • Overview of Schemas & Tables
            • Ethereum Tutorials
              • Getting Started with Decoded Ethereum Events
              • Getting Started with Ethereum Balances
              • Block Level and Daily Balances
              • Finding Centralized Exchange Flows
            • Solana Tutorials
              • Solana Schema & Tables: Video Walkthrough
              • Solana Specialty Tables: Video Walkthrough
              • Exploring Transactions in solana.events
            • THORChain Tutorials
              • THORChain Schema & Tables
              • Calculating IL for THORChain
          • More Tools & Resources
        • Get Inspired
      • LiveQuery
        • Get Started
        • LiveQuery in Depth
          • Functions
            • 🤝Partner Functions
            • 🧙‍♂️EVM Functions
              • 💡Seaport: Real-time Orders
              • 💡WETH Pool Balances
              • 💡General EVM Node Queries
            • 🤖API Functions
              • 💡Query TheGraph
              • 💡Query Defi Llama
            • ⚙️Utility Functions
              • 💡Hex Converters
              • 💡JSON RPC Request Builder
              • 💡EVM Logs Decoder
              • 💡Keccak256 Encoder
          • QuickNode Setup Guide
        • Secrets Manager
        • Get Inspired
      • Snowflake
      • API/SDK (Developers)
        • Get Started - Your first API call in < 2 min
        • SDK in Depth
          • JSON RPC methods
          • Run A Query
          • Query Results
          • Pagination
          • Sorting
          • Filtering
          • Query Seconds
          • Caching (maxAgeMinutes)
          • Rate Limits
          • Errors
          • More Examples
          • Archive
            • [ARCHIVED] JS/TS SDK
            • ShroomDK Migration Guide
            • [LEGACY] R
        • Tutorials
          • Have Questions?
        • Get Inspired
    • Insights and Tools
  • Earn
    • Flipside Earn
    • Onchain Rewards
      • Quests
    • Analyst Rewards
      • Ambassador Program
      • Direct to Analyst Commissions
    • Wallet Management
    • Tax Center
  • Support
    • General Support
    • Open a Ticket
      • That email doesn't look quite right
    • 🌟Product Special Releases
      • 2025
        • 2025-02-06 | EVM Blockchain Standardization
          • Table Change Overview
      • 2024
        • 2024-06-13 | Solana native and wrapped addresses
        • 2024-05-01 | Improvements to Pricing Data
          • Actions for Data Studio Users
          • Actions for API Users
          • Action for Data Share Users
    • 🗒️Release Notes
      • 2025
        • 2025-05-15 | Release Notes
        • 2025-05-01 | Release Notes
        • 2025-04-17 | Release Notes
        • 2025-04-03 | Release Notes
        • 2025-03-20 | Release Notes
        • 2025-03-06 | Release Notes
        • 2025-02-20 | Release Notes
        • 2025-02-06 | Release Notes
        • 2025-01-23 | Release Notes
      • 2024
        • 2024-12-24 | Release Notes
        • 2024-12-12 | Release Notes
        • 2024-11-27 | Release Notes
        • 2024-11-14 | Release Notes
        • 2024-10-31 | Release Notes
        • 2024-10-03 | Release Notes
        • 2024-10-17 | Release Notes
        • 2024-09-19 | Release Notes
        • 2024-09-05 | Release Notes
        • 2024-08-22 | Release Notes
        • 2024-08-08 | Release Notes
        • 2024-07-25 | Release Notes
        • 2024-07-11 | Release Notes
        • 2024-06-27 | Release Notes
        • 2024-06-14 | Release Notes
        • 2024-05-30 | Release Notes
        • 2024-05-16 | Release Notes
        • 2024-05-02 | Release Notes
        • 2024-04-18 | Release Notes
        • 2024-04-05 | Release Notes
        • 2024-03-18 | Release Notes
        • 2024-03-05 | Release Notes
        • 2024-02-20 | Release Notes
        • 2024-02-05 | Release Notes
    • 📊Studio Change log
  • Flipside Community
    • Get Started
    • Ambassador Program
    • Join Our Discord
    • Join Our Guild
Powered by GitBook
On this page

Was this helpful?

  1. Data
  2. Data Products
  3. Data Studio (SQL Analysts)
  4. Studio in Depth
  5. Create a Chart

Advanced Visualization

Flipside has licensed Highcharts for its new data visualization engine, allowing more viz choices (e.g. candle charts coming soon!) and advanced user customization for layouts and themes.

PreviousCreate a ChartNextBuild a Dashboard

Last updated 10 months ago

Was this helpful?

Given a chart type and key data (x axis, y axes, group variable) flipside will generate a smart default for your plot choice in our theme. Instead of creating 100s of new buttons and widgets for customization, we expose a settings page that allows for direct manipulation of the config.

 {
  "title": {
    "text": "CEX Flow Volume",
    "style": {
      "fontSize": "25px"
    }
  },
  "subtitle": {
    "text": "Combined In + Out Flows (USD)"
  },
  "xAxis": {
    "title": {
      "text": "Date",
      "style": {
        "color": "#FFFFF",
        "fontSize": "20px"
      }
    },
   ....
}

All the customization you're used too (axis titles) and a bunch of new options (font size, font colors, legend location, custom tooltips, and much more!)

Key Constraints

For security purposes, we do have some limitations we'd like to note upfront. You cannot manipulate the series object (the object that holds all your data!) and you cannot use custom JavaScript (i.e. no formatter() functions). But there's still plenty of out of the box highcharts customization available!

Standard Labels

Title, subtitle, xAxis, yAxis each have their title/text options to name them. They also have a style option to change color, font, and font sizes. You edit these via nested JSON, so be careful with the brackets. Axes, here xAxis, has additional features like changing the labels (26 Feb) or even rotating them to save space. You can choose to not show every date by implementing tickInterval in milliseconds (432000000 = 5 days) which allows for skipping labels to make the chart cleaner.

Some of the most powerful controls are the LabelFormats where you can adjust how days or months are labeled, %b %d, %Y = Mar 01, 24

Common LLM tools like chatGPT are excellent at supporting these custom configurations just specify it's highcharts js.

"title": {
    "text": "CEX Flow Volume",
    "style": {
      "fontSize": "25px"
    }
  },
  "subtitle": {
    "text": "Combined In + Out Flows (USD)"
  },
  "xAxis": {
    "title": {
      "text": "Date",
      "style": {
        "color": "#FFFFF",
        "fontSize": "20px"
      }
    },
    "labels": {
      "style": {
        "fontSize": "16px"
      },
      "rotation": 0
    },
    "tickInterval": 432000000,
    "dateTimeLabelFormats": {
      "day": "%b %d, %Y"
    }
  },
 
  "yAxis": {
    "title": {
      "text": "Flow Volume (USD)",
      "style": {
        "fontSize": "20px"
      }
    },
    "labels": {
      "style": {
        "fontSize": "16px"
      },
      "format": "{value:,.0f}"
    }
  }

PlotOptions

Most of the time, you won't touch plotOptions, as we fill this out using your chart selection. But for awareness options like marker and line are available to change things like making a line dashed or here, making all the points on the lines circles instead of different ones for each line (circle, square, triangle, etc.).

For charts that are monthly level, you may need to match your pointIntervalUnit with the dateTimeLabelFormats for the xAxis (here and above both "day" but could be "month").

 "plotOptions": {
    "line": {
      "pointStart": 1704085200000,
      "pointIntervalUnit": "day",
       "marker": {
        "enabled": true,
        "symbol": "circle"  
      }
    }

Colors, Legend, ToolTips

Colors are positionally determined based on the series data. You can manually apply an ORDER BY for your group (e.g. ORDER BY date ASC, central_exchange ASC) so that the colors are in alphabetical order; otherwise you can just play around with the ordering to identify which is which.

The legend object is somewhat simple: alignment, layout, location, etc. To remove a legend you can add "enabled": false.

The series object is not available for manipulation, but it is available for referencing. This comes up for tooltip pointFormat as you take group (series.name) and the color (series.color) to keep chart colors matching the hover over tooltip. The headerFormat works similarly as it allows custom HTML (<b> = bold) and style formatting (.0f = whole number, 0 decimals).

"colors": [
    "#cc9e4f",
    "#523151",
    "#9061c9" 
  ],
  "legend": {
    "align": "center",
    "layout": "horizontal",
    "verticalAlign": "top"
  },
    "tooltip": {
    "shared": true,
    "pointFormat": "<span style=\"color:{series.color}\">{series.name}: {point.y:,.0f}</span><br/>",
    "headerFormat": "<b>{point.key:%b %d, %Y}</b><br/>"
  },

Exports & Other

You generally won't touch these options. But to improve the UX of charts, we enable zoom, pan, and exports (png, svg, pdf) - and our license allows for removal of the highcharts website credits.

  "chart": {
    "panKey": "shift",
    "panning": {
      "type": "xy",
      "enabled": true
    },
    "zoomType": "xy"
  },
  "credits": {
    "enabled": false
  },
  "exporting": {
    "buttons": {
      "contextButton": {
        "menuItems": [
          "downloadPNG",
          "downloadJPEG",
          "downloadPDF",
          "downloadSVG"
        ]
        }
      },
    "enabled": true
   }
}

This is a brief and incomplete guide to the 100s of options Highcharts enables across dozens of chart types (which we are working to add support for in dashboards!). The goal is to get you off the ground manipulating charts and using external tools like the highcharts docs: or 3rd party references like chatGPT (for those with chatGPT Plus, we've created a ) and soon our custom AI agent trained on all things Flipside.

To more easily select colors, our data science team enjoys which has colorblind friendly, dark, light, palette, and custom color clustering, with easy to copy/paste JSON for pasting them here in the colors object.

highcharts
https://api.highcharts.com/highcharts/
Flipside Highcharts GPT
iwanthue
Advanced Visualization of Central Exchange flows, zoomed in!
Custom Tooltip!