Themes for stylized Vega and Vega-Lite visualizations.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Vega Themes

npm version Build Status

Themes for stylized Vega and Vega-Lite visualizations. For Vega version 3 and Vega-Lite 2.

A Vega theme is a configuration object with default settings for a variety of visual properties such as colors, typefaces, line widths and spacing. This module exports a set of named themes, which can be passed as input to the Vega or Vega-Lite with Vega-Embed or directly as a configuration object to the Vega parser.

Try Vega-Themes in our Observable Demo.

Vega Themes comes with Vega-Embed:

vegaEmbed(el, spec, {theme: 'quartz'});

If you want to use a different version, pass the theme as a configuration:

vegaEmbed(el, spec, {config: vegaThemes.quartz});

Once instantiated, a visualization theme can not be changed. Instead, the input specification must be re-parsed with a new theme.

Included Themes

# vega.themes.excel <>

Chart theme modeled after Microsoft Excel.

# vega.themes.ggplot2 <>

Chart theme modeled after ggplot2.

# vega.themes.quartz <>

Chart theme modeled after Quartz.

# vega.themes.vox <>

Chart theme modeled after Vox.

# vega.themes.fivethirtyeight <>

Chart theme modeled after FiveThirtyEight.

# vega.themes.dark <>

A dark theme.

Instructions for Developers

To view and test different themes, follow these steps:

  1. Install dependencies via yarn.
  2. Launch a local web server in the top-level directory with yarn start.
  3. Make changes. The website will automatically reload.

Release Process

To release a new version, make sure that everything works. Then run yarn version and bump the version number. Lastly, push to GitHub (with the release tag). Travis will build a bundle and make the npm release automatically.