@material-vega/core

Material Design themes for Vega Lite and Vega.

Helps create Vega charts that look like Material Design's data visualizations.

Install

Using npm:

npm install vega vega-lite vega-embed @material-vega/core

Using yarn:

yarn add vega vega-lite vega-embed @material-vega/core

Usage

Usage with Vega-Embed

import vegaEmbed from 'vega-embed';
import { createTheme } from '@material-vega/core';

vegaEmbed(container, spec, {
  renderer: 'svg',
  config: createTheme(
    {
      // options
    },
    'verticalBarChart'
  )
});

Usage with React-Vega

import React from 'react';
import ReactDOM from 'react-dom';
import { VegaLite } from 'react-vega';
import { createTheme } from '@material-vega/core';

const config = createTheme(
  {
    // options
  },
  'verticalBarChart'
);

ReactDOM.render(
  <VegaLite spec={spec} renderer="svg" config={config} />,
  document.getElementById('container')
);

Usage with Material UI

Projects using Material UI should use the @material-vega/material-ui package which integrates React-Vega and @material-vega/core with a wrapper that integrates with Material UI's theme.

API

createTheme(options, themeType);

Options

Material Vega's settings can be customized, most of these are just Material Design constants which allow for overriding by another Material Design library.

• font (default='"Roboto", "Helvetica", "Arial", sans-serif'): Font family to use for text
• labelPadding (default=8): Spacing between labels and the chart
• barCornerRadius (default=2): Corner radius to use for bars
• textColor (default='rgba(0, 0, 0, 0.87)'): Primary text color
• secondaryTextColor (default='rgba(0, 0, 0, 0.54)'): Secondary text color
• dividerColor (default='rgba(0, 0, 0, 0.12)'): Divider color
• color (default=undefined): Default color for single marks
• background (default='transparent'): Background color for charts
• thickDomainLineWidth (default=2): Bottom domain line thickness

Theme Type

Material Vega has a limited set of themes targeted for specific types of visualizations. A themeType matching the type of Vega visualization you are rendering must be specified.

• verticalBarChart: Standard Vertical Bar Charts
• focusedVerticalBarChart: Vertical Bar Charts without axis labels and lines
• horizontalBarChart: Horizontal Bar Charts
• lineChart: Line Charts
• areaChart: Area Charts
• areaLineChart: Area Charts with a line and translucent area
• pieChart: Pie Charts (experimental)
• donutChart: Donut Charts (experimental)
• scatterplotChart: Scaterplot / Point Charts