Chartio Branding Guide

Chartio Logo

chartio logo black white-back
Dark logo, light back: SVG, EPS, PNG.
chartio logo white black-back
Light logo, dark back: SVG, EPS, PNG.
chartio logo black trans-back
Dark logo, transparent back: SVG, EPS, PNG.
chartio logo white trans-back
Light logo, transparent back: SVG, EPS, PNG.
chartio black square logo white-back
Square dark logo: SVG, EPS, PNG.
chartio black square logo trans-back
Square dark logo: SVG, EPS, PNG.
chartio white square logo  black-back
Square light logo: SVG, EPS, PNG.
chartio white square logo trans-back
Square light logo: SVG, EPS, PNG.

Chartio Colors

$text-color: #222
$text-color-light: #555
$text-color-lighter: #999
$grey-color: #bbb
$grey-color-light: #ddd
$grey-color-lighter: #eee
$primary-color: #3c97da
$accent-color: #FFD759
$strong-color: #E75656
$success-color: #3CC677
$helper-color: #A084E2
$warning-color: #FE9D52

Typography

Page Title Headline

h1: Roboto Slab, 2.441em, 400 weight

Blockquotes and stat headlines

h2: Open Sans, 1.953em, italic, 600 weight

Section Headlines

h3: Roboto Slab, 1.563em, 400 weight

Lg Labels

h4: Open Sans, 1em, uppercase, 600 weight
Md Labels
h5: Open Sans, 1em, italic, 600 weight
Sm Labels
h6: Open Sans, 0.8em, uppercase, 700 weight

hello@chartio.com
222 Kearny Street Suite 525
San Francisco, California
94108

p.small-font, figcaption: 0.8em, 700 weight

Paragraph text. The regular 'ol "body copy" size. And here is an inline-link too. Some example text: Out-of-the-box connections to your data sources from Amazon Redshift to CSV files, so you can start exploring data immediately.

p: Open Sans, 1em, 600 weight}
  • Unordered lists

  • Items must be

  • wrapped in something

  • Like a header or paragraph tag

ul li: Open Sans, 1em, 600 weight
Anchor Link
a, i.fa-long-arrow
button.btn-primary
button

Basic Table

Function Description
Add Custom Column Add a calculated column to your query by using one of our built-in functions or choose a custom formula.
Case Statement Add or edit a column in your query results where values are set based on an “if… then” condition.
Combine Columns Combine columns either by applying a mathematical operation or by concatenation, or a series of interconnected events.
Edit Column Edit an existing column by entering a custom formula.

Collapsable Table

Rows
Function Description
Filter Rows Ability to filter rows based on certain conditions.
Limit Rows Limit the number of rows included in your query results and can be used when applied after a sort.
Sort Rows Apply a sort to one or more columns.
Columns
Function Description
Add Custom Column Add a calculated column to your query by using one of our built-in functions or choose a custom formula.
Case Statement Add or edit a column in your query results where values are set based on an “if… then” condition.
Combine Columns Combine columns either by applying a mathematical operation or by concatenation, or a series of interconnected events.
Edit Column Edit an existing column by entering a custom formula.
Hide Column Hide one or more columns in your query results.
Rename Columns Rename one or more columns. Useful for display purposes or shortening column names for ease of use in formulas.
Reorder Columns Easily click and drag your column names to reorder how they will appear in your chart.
Transform
Function Description
Bucket Data Divides values from one column into a series of ranges and then counts how many values fall within each range.
Extrapolate Data Choose whether to add data to the existing column or create a new one, the number of rows returned, and the type of extrapolation used (Cubic, Quadratic, or Linear).
Group Use the GROUP BY clause to group your query results based on a specified column.
Pivot Data If your chart has one measure grouped by two dimensions, such as count of activity grouped by month and by activity type, you'll want to pivot the data so you can use it in a chart.
Unpivot Data Unpivot data is useful when you have multiple single value columns that you want to use in a visualization.
Zero Fill Data Zero fill fills in all missing values, such as a data or numeric columns, in your query results with zeros.