Size and Style

The Size & Style panel contains options to change the chart’s theme, colors, size, fonts, grid and axis styles.

Using the Size and Options panel to create a horizontal bar chart

Tip

On the Chart Theme, Fonts, Grid Style and Axis Style cards, workspace Owners and Admins will see a star icon next to the card title. Click it to save that card’s current settings as this workspace’s default for new charts, the same settings shown on the Chart Defaults page in Workspace Settings.

Chart Themes

A theme sets a chart’s background color, color scheme, fonts, and grid and axis style all in one step. Open the Chart Theme dropdown at the top of the Size & Style panel to browse the available themes, each shown with a small preview of its background and palette.

Applying a theme overwrites the chart’s background color, color scheme, single color, fonts (title, subtitle and axis titles), grid line opacity, axis line and tick opacities, and plot border, background and shadow. It does not change the chart type, axis type, data labels, or which columns are plotted, and any of these settings can still be fine-tuned afterward without losing the rest of the theme.

Available Themes

Theme	Description
Classic	The InstaCharts default
Midnight	Built for dark social feeds
Studio	Modern online theme
Broadsheet	Newspaper data graphic
Neon	Loud and screenshot friendly
Pastel	Friendly and approachable
Ember	Energetic and modern
Financial Light	Precise, for market data
Financial Dark	Trading terminal style
Code	A coder’s terminal, dark and monospace

Note

Chart Themes style one chart at a time. Dashboards have their own, separate set of themes that style the whole dashboard page at once; see Dashboard Settings.

Color Scheme

Use this dropdown to select a color scheme for the chart. Most color schemes contain 10 colors.

Tip

If there are more than 10 items in your chart, use the Default20 color scheme, which has 20 colors.

Tip

To apply a color scheme, single color, font and locale to every new chart automatically, set your workspace chart defaults.

For charts that contain a single color (Ex: line chart), it’s possible to select an individual color. Next to the color scheme dropdown, a single color selector will appear. Click it to launch a color picker dialog.

Tip

Every color picker in InstaCharts, including this one, has an eye-dropper tool. Click it to pick a color directly off your chart or screen instead of choosing from a swatch.

Selecting a color scheme for the chart from the color scheme dropdown

Available Color Schemes

Color Scheme	Type		Best for
Tableau	Categorical		Showing different groups or categories of data
Tableau 20	Categorical		Showing different groups or categories of data
Category 20 B	Categorical		Showing different groups or categories of data
Category 20 C	Categorical		Showing different groups or categories of data
Observable	Categorical		Showing different groups or categories of data
Paired	Categorical		Showing different groups or categories of data
Pastel	Categorical		Showing different groups or categories of data
Executive	Categorical		Showing different groups or categories of data
Excel	Categorical		Showing different groups or categories of data
Minimal	Categorical		Showing different groups or categories of data
Bold	Categorical		Showing different groups or categories of data
Viridis	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Magma	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Plasma	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Blue Purple	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Pink Purple	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Dark Multi	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Dark Blue	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Dark Green	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Light Multi	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Green Blue	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Gold Red	Sequential Multi-Hue		Displaying numeric values getting larger or smaller
Red Yellow Green	Diverging		Highlights numeric values with a meaningful midpoint
Spectral	Diverging		Highlights numeric values with a meaningful midpoint
Rainbow	Cyclical		Highlight repeating cycles within data
Blues	Sequential Single-Hue		Displaying numeric values getting larger or smaller
Reds	Sequential Single-Hue		Displaying numeric values getting larger or smaller
Teals	Sequential Single-Hue		Displaying numeric values getting larger or smaller
Purples	Sequential Single-Hue		Displaying numeric values getting larger or smaller
Greens	Sequential Single-Hue		Displaying numeric values getting larger or smaller
Warm Grays	Sequential Single-Hue		Displaying numeric values getting larger or smaller
Studio	Theme Palette		Pairs with the Studio chart theme
Midnight	Theme Palette		Pairs with the Midnight chart theme
Broadsheet	Theme Palette		Pairs with the Broadsheet chart theme
Neon	Theme Palette		Pairs with the Neon chart theme
Pastel Theme	Theme Palette		Pairs with the Pastel chart theme
Ember	Theme Palette		Pairs with the Ember chart theme
Financial	Theme Palette		Pairs with the Financial Light/Dark chart themes
Code	Theme Palette		Pairs with the Code chart theme

Customize Colors

For charts that have multiple colors (multi line chart, pie chart, etc), use this section to customize which colors are assigned to different legend items.

Changing the colors assigned to each item in the legend to match team colors.

• Customize Colors Turn this toggle on to customize the colors shown in the chart. The colors will be prefilled with the chosen color scheme.

• Color Mode Set to either save the colors in order, or assign a specific color to a specific label. This comes in handy when changing the columns plotted in the breakdown axis without losing your color selections.

• Reset All Press the reset all button to revert back to the original color scheme.

• Color Scroll Box All legend items will appear in this scroll box along with the color assigned to that item. To change an item’s color, click on it’s color square.

Tip

Color customizations are only available for charts that have legends with 50 items or fewer.

Negative Number Color

You can choose to show negative values in your chart in a different color. To show negative values in a different color, enable the Negative Number Color toggle, then select a color from the color box.

The default color for negative numbers is a shade of red.

Chart Width and Height

• X-Axis Width A slider that sets the width of the x-axis. The value scale is in pixels, and the width can be set in 25 px increments.

• Y-Axis Height A slider that sets the height of the y-axis. The value scale is in pixels, and the height can be set in 25 px increments.

• Auto Size Large # Items When a dataset has a large number of items to plot (more than 20 items) in the X-Axis, this allows the X-Axis to stretch as long as it needs to in order to plot every item.

This setting is enabled by default.

Fonts

Use the Fonts card to set the font and font color for all the text in the chart, and optionally give the title, subtitle and axis titles their own font settings.

• Main Text Click the font button to pick the font used by all chart text. The menu opens with recommended fonts and any fonts you’ve used recently, and can search the full Google Fonts library.
• Font Color Set a font color applied to all chart text. Leave it unset to use InstaCharts’ built-in colors (a darker shade for the title, a lighter shade for the subtitle).
• Customize Text Toggle this on to override the font, size, bold, italic and color of the Title, Subtitle and Axis Titles independently of the main font. The title also gets its own line height option.

Adding a Custom Google Font

If the font you want isn’t in the list, open the font menu and click Add Google Font at the bottom. Find a font on Google Fonts, open its “Get embed code” panel, and paste the font’s stylesheet URL into the dialog (ex: https://fonts.googleapis.com/css2?family=Pacifico&display=swap). The font is added to your list and applied to the chart immediately.

Grid Style

Turning off the grid lines and tick marks produces a cleaner looking chart

This card (labeled Plot Style in the left sidebar) controls the styling of the chart’s plot area and grid lines. These options don’t apply to pie charts.

• Show Plot Border Toggle this on to draw a border around the plot area, then choose its Border Color.
• Border Width and Border Radius Set the thickness and corner rounding of the plot border. Only shown when Show Plot Border is on.
• Plot Lines Opacity Choose a number from 0-100 to use as the opacity of the grid lines that connect to the Y-Axis. Set to 0 to turn off these lines.
• Plot Background Color Choose a background color that fills the plot area, behind the data. Leave it unset for a transparent plot background, or click Reset to clear a color you’ve set.
• Plot Shadow Toggle this on to add a drop shadow under the plot area.

X and Y-Axis Style

This card controls the styling of the X and Y-Axis, with separate tabs for each axis. These options don’t apply to pie charts.

Each tab contains the following options:

• Show Axis Use this toggle to turn on or off the entire axis
• Tick Mark Opacity Choose between a number from 0-100 to use as the opacity of the tick marks on this axis. Set to 0 to turn off the tick marks.
• Label Opacity Choose between a number from 0-100 to use as the opacity of the labels on this axis. Set to 0 to turn off the labels.
• Axis Line Opacity Choose between a number from 0-100 to use as the opacity of the axis line. Set to 0 to turn off the axis line.
• Title Opacity Choose between a number from 0-100 to use as the opacity of the axis title. Set to 0 to turn off the title.

Related

• Chart Options - sorting, axis min/max and chart-specific settings
• Labels - axis, series and data labels
• Chart Text - titles, legend and locale
• Dashboard Settings - the separate theme system for whole dashboards
• Workspace Chart Defaults - set a default theme, colors, fonts and style for new charts
• Chart Types - browse all available charts