Thin-Viz

Create interactive, embeddable cards from your own data using the Tako Thin-Viz API.

Creating a Card

Create a card by posting your component configurations. One API call, one card.

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Monthly Revenue",
    "source": "Internal Analytics",
    "components": [
      {
        "component_type": "generic_timeseries",
        "config": {
          "datasets": [
            {
              "label": "Revenue",
              "data": [
                {"x": "2024-01", "y": 50000},
                {"x": "2024-02", "y": 62000},
                {"x": "2024-03", "y": 71000}
              ],
              "units": "$"
            }
          ],
          "chart_type": "line",
          "title": "Monthly Revenue"
        }
      }
    ]
  }'

Response:

{
  "card_id": "abc123xyz",
  "title": "Monthly Revenue",
  "description": "",
  "embed_url": "https://tako.com/embed/abc123xyz",
  "image_url": "https://tako.com/image/abc123xyz",
  "webpage_url": "https://tako.com/card/abc123xyz",
  "card_type": "visualization_card",
  "visualization_data": { ... }
}

Request Fields

Field	Type	Required	Description
`components`	array	Yes	List of component configurations (see Available Components)
`title`	string	No	Card title (falls back to header component title if not provided)
`description`	string	No	Card description
`source`	string	No	Data source attribution displayed in footer

Embedding Your Card

Use the embed_url from the response in an iframe:

<iframe
  src="https://tako.com/embed/abc123xyz"
  width="600"
  height="400"
  frameborder="0"
></iframe>

Add ?dark_mode=true or ?dark_mode=false to control the theme.

Discovering Card Types with Default Schemas

Use the default schemas API to browse available card templates and see what fields each component requires.

List Available Schemas

curl https://api.trytako.com/api/v1/thin_viz/default_schema/ \
  -H "X-API-Key: YOUR_API_KEY"

Response:

[
  { "name": "stock_card", "description": "Stock visualization card with timeseries chart", "components": ["generic_timeseries"] },
  { "name": "timeseries_card", "description": "Generic timeseries chart. Use show_kicker_boxes and kicker fields for stock boxes.", "components": ["generic_timeseries"] },
  { "name": "bar_chart", "description": "Single-series bar chart with categorical x-axis (e.g., regions, products)", "components": ["header", "categorical_bar"] },
  { "name": "grouped_bar_chart", "description": "Multi-series grouped/stacked bar chart for comparing categories across groups", "components": ["header", "categorical_bar"] },
  { "name": "data_table_chart", "description": "Bar chart with data table showing values below", "components": ["header", "data_table_chart"] },
  { "name": "histogram", "description": "Histogram chart showing frequency distribution of values", "components": ["histogram"] },
  { "name": "pie_chart", "description": "Pie chart showing proportional data as slices of a circle", "components": ["pie"] },
  { "name": "table", "description": "Data table with configurable columns, sorting, and formatting", "components": ["table"] },
  { "name": "header", "description": "Card header with title and optional subtitle", "components": ["header"] },
  { "name": "financial_boxes", "description": "Financial metric boxes with values and optional growth indicators", "components": ["financial_boxes"] },
  { "name": "choropleth", "description": "Choropleth map showing geographic data with color intensity by region (US states or world)", "components": ["choropleth"] },
  { "name": "treemap", "description": "Treemap chart showing hierarchical data as proportional rectangles", "components": ["treemap"] },
  { "name": "heatmap", "description": "2D heatmap with color intensity representing values (e.g., correlation matrix)", "components": ["heatmap"] },
  { "name": "boxplot", "description": "Box plot showing statistical distributions (min, Q1, median, Q3, max)", "components": ["boxplot"] },
  { "name": "waterfall", "description": "Waterfall chart showing incremental positive/negative changes (e.g., income statement breakdown)", "components": ["waterfall"] },
  { "name": "scatter_chart", "description": "Scatter plot showing relationships between two continuous variables", "components": ["scatter"] },
  { "name": "bubble_chart", "description": "Bubble chart (scatter plot with size dimension) for 3-variable data", "components": ["bubble"] }
]

Get Schema Details

Retrieve template information for a specific schema to see required fields, optional fields, and examples:

curl https://api.trytako.com/api/v1/thin_viz/default_schema/bar_chart/ \
  -H "X-API-Key: YOUR_API_KEY"

This returns component_templates with field definitions and example configurations you can use as a starting point.

Example: Stock Card with Kicker Boxes

For financial data, use the generic_timeseries component with show_kicker_boxes enabled:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "AAPL vs GOOGL",
    "source": "Market Data",
    "components": [
      {
        "component_type": "generic_timeseries",
        "config": {
          "datasets": [
            {
              "label": "AAPL",
              "kicker": "NASDAQ",
              "data": [
                {"x": "2024-01-01", "y": 185.50},
                {"x": "2024-01-02", "y": 195.20}
              ],
              "units": "$"
            },
            {
              "label": "GOOGL",
              "kicker": "NASDAQ",
              "data": [
                {"x": "2024-01-01", "y": 152.60},
                {"x": "2024-01-02", "y": 150.10}
              ],
              "units": "$"
            }
          ],
          "chart_type": "line",
          "title": "Stock Price (USD)",
          "show_kicker_boxes": true
        }
      }
    ]
  }'

When show_kicker_boxes is enabled, each dataset with a kicker field renders a stock box above the chart showing the exchange label, current value, and change.

Example: Stock Card with Explicit Stock Boxes

Alternatively, use separate stock_boxes and generic_timeseries components for full control:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "AAPL vs GOOGL",
    "source": "Market Data",
    "components": [
      {
        "component_type": "stock_boxes",
        "config": {
          "items": [
            {
              "labelPrimary": "AAPL",
              "labelSecondary": "NASDAQ",
              "valuePrimary": "$195.20",
              "subValue": "+$9.70 (+5.24%)"
            },
            {
              "labelPrimary": "GOOGL",
              "labelSecondary": "NASDAQ",
              "valuePrimary": "$150.10",
              "subValue": "-$2.50 (-1.64%)"
            }
          ]
        }
      },
      {
        "component_type": "generic_timeseries",
        "config": {
          "datasets": [
            {
              "label": "AAPL",
              "data": [
                {"x": "2024-01-01", "y": 185.50},
                {"x": "2024-01-02", "y": 195.20}
              ],
              "units": "$"
            },
            {
              "label": "GOOGL",
              "data": [
                {"x": "2024-01-01", "y": 152.60},
                {"x": "2024-01-02", "y": 150.10}
              ],
              "units": "$"
            }
          ],
          "chart_type": "line",
          "title": "Stock Price (USD)"
        }
      }
    ]
  }'

For stock_boxes, the subValue color is automatic: values starting with + appear green, - appear red.

Example: Bar Chart

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Revenue by Region",
    "source": "Internal Analytics",
    "components": [
      {
        "component_type": "header",
        "config": {
          "title": "Revenue by Region"
        }
      },
      {
        "component_type": "categorical_bar",
        "config": {
          "datasets": [
            {
              "label": "Revenue",
              "data": [
                {"x": "North", "y": 120000},
                {"x": "South", "y": 98000},
                {"x": "East", "y": 87000},
                {"x": "West", "y": 145000}
              ],
              "units": "$"
            }
          ]
        }
      }
    ]
  }'

Example: Data Table Chart

A bar chart with an auto-generated data table below showing the values:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Q4 Sales by Product",
    "source": "Sales Team",
    "components": [
      {
        "component_type": "header",
        "config": {
          "title": "Q4 Sales by Product"
        }
      },
      {
        "component_type": "data_table_chart",
        "config": {
          "datasets": [
            {
              "label": "Units Sold",
              "data": [
                {"x": "Widget A", "y": 1200},
                {"x": "Widget B", "y": 850},
                {"x": "Widget C", "y": 2100}
              ]
            }
          ]
        }
      }
    ]
  }'

Example: Financial Boxes

Display financial metrics with growth indicators:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "AAPL Financials",
    "source": "SEC Filings",
    "components": [
      {
        "component_type": "financial_boxes",
        "config": {
          "items": [
            {
              "header": "Revenue",
              "value": "$94.9B",
              "growth": {"formattedValue": "6.1% YoY", "value": 0.061}
            },
            {
              "header": "Net Income",
              "value": "$23.6B",
              "growth": {"formattedValue": "-3.4% YoY", "value": -0.034}
            },
            {
              "header": "EPS",
              "value": "$1.64"
            }
          ]
        }
      }
    ]
  }'

Growth indicator colors are automatic: positive value appears green, negative appears red.

Example: Data Table

A configurable table with columns, sorting, and pagination:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Product Performance",
    "components": [
      {
        "component_type": "table",
        "config": {
          "columns": [
            {"field": "name", "label": "Product", "type": "string"},
            {"field": "revenue", "label": "Revenue", "type": "number", "units": "$"},
            {"field": "growth", "label": "Growth", "type": "percent", "units": "%"}
          ],
          "rows": [
            {"name": "Product A", "revenue": 1500000, "growth": 15.0},
            {"name": "Product B", "revenue": 2300000, "growth": -5.0},
            {"name": "Product C", "revenue": 980000, "growth": 22.3}
          ],
          "searchable": true,
          "initial_sort_field": "revenue",
          "initial_sort_order": "desc"
        }
      }
    ]
  }'

Combining Multiple Components

Cards can contain multiple components stacked together. This lets you build richer visualizations by pairing related data.

Financial Boxes + Timeseries Chart

Pair summary metrics with a trend chart:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "AAPL Quarterly Overview",
    "source": "SEC Filings",
    "components": [
      {
        "component_type": "financial_boxes",
        "config": {
          "items": [
            {
              "header": "Revenue",
              "value": "$94.9B",
              "growth": {"formattedValue": "6.1% YoY", "value": 0.061}
            },
            {
              "header": "Net Income",
              "value": "$23.6B",
              "growth": {"formattedValue": "-3.4% YoY", "value": -0.034}
            },
            {
              "header": "EPS",
              "value": "$1.64"
            }
          ]
        }
      },
      {
        "component_type": "generic_timeseries",
        "config": {
          "datasets": [
            {
              "label": "Revenue",
              "data": [
                {"x": "2023-Q1", "y": 94.8},
                {"x": "2023-Q2", "y": 81.8},
                {"x": "2023-Q3", "y": 89.5},
                {"x": "2023-Q4", "y": 119.6},
                {"x": "2024-Q1", "y": 90.8},
                {"x": "2024-Q2", "y": 85.8},
                {"x": "2024-Q3", "y": 94.9}
              ],
              "units": "$"
            }
          ],
          "chart_type": "bar",
          "title": "Quarterly Revenue ($B)"
        }
      }
    ]
  }'

Add a styled header above any chart:

curl -X POST https://api.trytako.com/api/v1/thin_viz/create/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Team Headcount",
    "components": [
      {
        "component_type": "header",
        "config": {
          "title": "Team Headcount by Department",
          "subtitle": "As of January 2025"
        }
      },
      {
        "component_type": "categorical_bar",
        "config": {
          "datasets": [
            {
              "label": "Headcount",
              "data": [
                {"x": "Engineering", "y": 142},
                {"x": "Sales", "y": 89},
                {"x": "Marketing", "y": 54},
                {"x": "Operations", "y": 67}
              ]
            }
          ]
        }
      }
    ]
  }'

Components render in the order they appear in the components array - top to bottom on the card.

Available Components

Component	Description
`header`	Card header with title and optional subtitle
`generic_timeseries`	Line, bar, or scatter timeseries charts
`categorical_bar`	Bar chart with categorical x-axis (regions, products, etc.)
`data_table_chart`	Bar chart with auto-generated data table below
`financial_boxes`	Financial metric boxes with values and growth indicators
`table`	Data table with configurable columns, sorting, and pagination
`pie`	Pie chart showing proportional data as slices of a circle
`histogram`	Histogram chart showing frequency distribution of values
`scatter`	Scatter plot showing relationships between two continuous variables
`bubble`	Bubble chart (scatter plot with size dimension) for 3-variable data
`choropleth`	Choropleth map showing geographic data with color intensity by region
`heatmap`	2D heatmap with color intensity representing values
`boxplot`	Box plot showing statistical distributions (min, Q1, median, Q3, max)
`treemap`	Treemap chart showing hierarchical data as proportional rectangles
`waterfall`	Waterfall chart showing incremental positive/negative changes

Getting Started

Integrating Tako

Popular Integrations and Examples

Creating a Card

Request Fields

Embedding Your Card

Discovering Card Types with Default Schemas

List Available Schemas

Get Schema Details

Example: Stock Card with Kicker Boxes

Example: Stock Card with Explicit Stock Boxes

Example: Bar Chart

Example: Data Table Chart

Example: Financial Boxes

Example: Data Table

Combining Multiple Components

Financial Boxes + Timeseries Chart

Header + Bar Chart

Available Components

Getting Started

Integrating Tako

Popular Integrations and Examples

​Creating a Card

​Request Fields

​Embedding Your Card

​Discovering Card Types with Default Schemas

​List Available Schemas

​Get Schema Details

​Example: Stock Card with Kicker Boxes

​Example: Stock Card with Explicit Stock Boxes

​Example: Bar Chart

​Example: Data Table Chart

​Example: Financial Boxes

​Example: Data Table

​Combining Multiple Components

​Financial Boxes + Timeseries Chart

​Header + Bar Chart

​Available Components

Creating a Card

Request Fields

Embedding Your Card

Discovering Card Types with Default Schemas

List Available Schemas

Get Schema Details

Example: Stock Card with Kicker Boxes

Example: Stock Card with Explicit Stock Boxes

Example: Bar Chart

Example: Data Table Chart

Example: Financial Boxes

Example: Data Table

Combining Multiple Components

Financial Boxes + Timeseries Chart

Header + Bar Chart

Available Components