Vega Themes

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. Try it here.

# vega.themes.ggplot2 <>

Chart theme modeled after ggplot2. Try it here.

# vega.themes.quartz <>

Chart theme modeled after Quartz. Try it here.

# vega.themes.vox <>

Chart theme modeled after Vox. Try it here.

# vega.themes.fivethirtyeight <>

Chart theme modeled after FiveThirtyEight. Try it here.

# vega.themes.dark <>

A dark theme. Try it here.

# vega.themes.latimes <>

Chart theme modeled after the Los Angeles Times. Try it here.

# vega.themes.urbaninstitute <>

Chart theme modeled after the Urban Institute. Try it here.

# vega.themes.googlecharts <>

Chart theme modeled after Google Charts. Try it here.

# vega.themes.powerbi <>

Chart theme modeled after Power BI Desktop default theme. Try it here.

# vega.themes.carbonwhite <>

Chart theme modeled after IBM Carbon Charts - white theme. Try it here.

# vega.themes.carbong10 <>

Chart theme modeled after IBM Carbon Charts - grey 10 theme. This is the white theme with a slightly darker background. Try it here.

# vega.themes.carbong90 <>

Chart theme modeled after IBM Carbon Charts - grey 90 theme. Try it here.

# vega.themes.carbong100 <>

Chart theme modeled after IBM Carbon Charts - grey 100 theme. This is the grey 90 theme with a slightly darker background. Try it here.

Instructions for Developers

To view and test different themes, follow these steps:

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

Publishing

To make a release, run npm run release.

Current Tags

2.12.1--canary.402.305039f.0 ... canary (4 years ago)
2.14.0 ... latest (3 years ago)
2.13.0-next.0 ... next (3 years ago)

30 Versions

2.14.0 ... 3 years ago
2.13.0 ... 3 years ago
2.12.1 ... 3 years ago
2.13.0-next.0 ... 3 years ago
2.12.1--canary.402.305039f.0 ... 4 years ago
2.12.0 ... 4 years ago
2.10.1--canary.399.5c87997.0 ... 4 years ago
2.10.1--canary.337.86557bf.0 ... 4 years ago
2.10.1--canary.327.aea56da.0 ... 4 years ago
2.10.1--canary.325.ca4a56e.0 ... 4 years ago
2.10.0 ... 5 years ago
2.9.1 ... 6 years ago
2.9.0 ... 6 years ago
2.8.5 ... 6 years ago
2.8.4 ... 6 years ago
2.8.3 ... 6 years ago
2.8.2 ... 6 years ago
2.7.1 ... 6 years ago
2.6.1 ... 6 years ago
2.6.0 ... 6 years ago
2.5.0 ... 7 years ago
2.4.0 ... 7 years ago
2.3.2 ... 7 years ago
2.3.1 ... 7 years ago
2.3.0 ... 7 years ago
2.2.0 ... 7 years ago
2.1.1 ... 8 years ago
2.1.0 ... 8 years ago
2.0.0 ... 8 years ago
1.1.0 ... 8 years ago