Material Design stylized themes for Vega Lite visualizations
npm install @material-vega/core@material-vega/coreMaterial Design themes for Vega Lite and Vega.
Helps create Vega charts that look like Material Design's data visualizations.
Using npm:
``shell`
npm install vega vega-lite vega-embed @material-vega/core
Using yarn:
`shell`
yarn add vega vega-lite vega-embed @material-vega/core
`js
import vegaEmbed from 'vega-embed';
import { createTheme } from '@material-vega/core';
vegaEmbed(container, spec, {
renderer: 'svg',
config: createTheme(
{
// options
},
'verticalBarChart'
)
});
`
`js
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(
document.getElementById('container')
);
`
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.
`js`
createTheme(options, themeType);
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 textlabelPadding
- (default=8): Spacing between labels and the chartbarCornerRadius
- (default=2): Corner radius to use for barstextColor
- (default='rgba(0, 0, 0, 0.87)'): Primary text colorsecondaryTextColor
- (default='rgba(0, 0, 0, 0.54)'): Secondary text colordividerColor
- (default='rgba(0, 0, 0, 0.12)'): Divider colorcolor
- (default=undefined): Default color for single marksbackground
- (default='transparent'): Background color for chartsthickDomainLineWidth
- (default=2): Bottom domain line thickness
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 ChartsfocusedVerticalBarChart
- : Vertical Bar Charts without axis labels and lineshorizontalBarChart
- : Horizontal Bar ChartslineChart
- : Line ChartsareaChart
- : Area ChartsareaLineChart
- : Area Charts with a line and translucent areapieChart
- : Pie Charts (experimental)donutChart
- : Donut Charts (experimental)scatterplotChart`: Scaterplot / Point Charts
-