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.
Chart theme modeled after Microsoft Excel. Try it here.
Chart theme modeled after ggplot2. Try it here.
Chart theme modeled after Quartz. Try it here.
Chart theme modeled after Vox. Try it here.
# vega.themes.fivethirtyeight <>
Chart theme modeled after FiveThirtyEight. Try it here.
A dark theme. Try it here.
Chart theme modeled after the Los Angeles Times. Try it here.
# vega.themes.urbaninstitute <>
Chart theme modeled after the Urban Institute. Try it here.
Chart theme modeled after Google Charts. Try it here.
Chart theme modeled after Power BI Desktop default theme. Try it here.
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.
To make a release, run npm run release
.