Home

Awesome

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

<a name="excel" href="#excel">#</a> vega.themes.<b>excel</b> <>

Chart theme modeled after Microsoft Excel. Try it here.

<a name="ggplot2" href="#ggplot2">#</a> vega.themes.<b>ggplot2</b> <>

Chart theme modeled after ggplot2. Try it here.

<a name="quartz" href="#quartz">#</a> vega.themes.<b>quartz</b> <>

Chart theme modeled after Quartz. Try it here.

<a name="vox" href="#vox">#</a> vega.themes.<b>vox</b> <>

Chart theme modeled after Vox. Try it here.

<a name="fivethirtyeight" href="#fivethirtyeight">#</a> vega.themes.<b>fivethirtyeight</b> <>

Chart theme modeled after FiveThirtyEight. Try it here.

<a name="dark" href="#dark">#</a> vega.themes.<b>dark</b> <>

A dark theme. Try it here.

<a name="latimes" href="#latimes">#</a> vega.themes.<b>latimes</b> <>

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

<a name="urbaninstitute" href="#urbaninstitute">#</a> vega.themes.<b>urbaninstitute</b> <>

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

<a name="googlecharts " href="#googlecharts">#</a> vega.themes.<b>googlecharts</b> <>

Chart theme modeled after Google Charts. Try it here.

<a name="powerbi " href="#powerbi">#</a> vega.themes.<b>powerbi</b> <>

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

<a name="carbonwhite " href="#carbonwhite">#</a> vega.themes.<b>carbonwhite</b> <>

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

<a name="carbong10" href="#carbong10">#</a> vega.themes.<b>carbong10</b> <>

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

<a name="carbong90" href="#carbong90">#</a> vega.themes.<b>carbong90</b> <>

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

<a name="carbong100" href="#carbong100">#</a> vega.themes.<b>carbong100</b> <>

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:

  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.

Publishing

To make a release, run npm run release. To deploy the examples, run yarn deploy:gh.