Chartio Brand Kit

Chartio Pronunciation

char·tio | \ ˈchär-tē-ˌō \

Chartio Logo

Dark logo, light back: SVG, EPS, PNG.

Light logo, dark back: SVG, EPS, PNG.

Dark logo, transparent back: SVG, EPS, PNG.

Light logo, transparent back: SVG, EPS, PNG.

Square dark logo: SVG, EPS, PNG.

Square light logo: SVG, EPS, PNG.

Old Logos (Do Not Use)

Chartio Colors

$color-text: #111111

$color-text-light: #555555

$color-text-lighter: #999999

$color-grey: #bbbbbb

$color-grey-light: #dddddd

$color-grey-lightest: #f5f5f5

$color-primary: #2872E1

$color-accent: #FFE461

$color-warning: #F92D5D

$color-success: #12D2B0

Typography

Page Title Headline

h1: Roboto, 2.441em, 400 weight

Stat headlines

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

Section Headlines

h3: Roboto, 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
548 Market St, Suite 19064
San Francisco, California
94104

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.