@eidetiq/react-vega v7.1.1
react-vega
Use
vega
orvega-lite
inreact
application smoothly!
DEMO: http://vega.github.io/react-vega/
Install
npm install react vega vega-lite react-vega --save
Versions
react-vega@7.x.x
is rewritten in typescript with several API changes and now support bothvega
andvega-lite
. If you are upgrading fromreact-vega
orreact-vega-lite
version6.x.x
to7.x.x
, read this migration guide.react-vega@6.x.x
is same with5.x.x
but output are in different directories and exported as bothcommonjs
andes module
.react-vega@5.x.x
usesvega
again.react-vega@4.x.x
has same interface with3.x.x
except it uses the lightweightvega-lib
instead ofvega
.react-vega@3.x.x
was update with breaking changes to supportvega@3.0
.- If you are looking to use
react
withvega@2.x
, please usereact-vega@2.3.1
.
Example code
There are two approaches to use this library.
Approach#1 Create class from spec, then get a React class to use
BarChart.js
See the rest of the spec in spec1.js.
import React, { PropTypes } from 'react';
import { createClassFromSpec } from 'react-vega';
export default createClassFromSpec('BarChart', {
"width": 400,
"height": 200,
"data": [{ "name": "table" }],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
... // See the rest in packages/react-vega-demo/stories/vega/spec1.js
});
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import BarChart from './BarChart.js';
const barData = {
table: [...]
};
function handleHover(...args){
console.log(args);
}
const signalListeners = { hover: handleHover };
ReactDOM.render(
<BarChart data={barData} signalListeners={signalListeners} />,
document.getElementById('bar-container')
);
Approach#2 Use <Vega>
generic class and pass in spec
for dynamic component.
Provides a bit more flexibility, but at the cost of extra checks for spec changes.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Vega } from 'react-vega';
const spec = {
"width": 400,
"height": 200,
"data": [{ "name": "table" }],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
... // See the rest in packages/react-vega-demo/stories/vega/spec1.js
}
const barData = {
table: [...]
};
function handleHover(...args){
console.log(args);
}
const signalListeners = { hover: handleHover };
ReactDOM.render(
<Vega spec={spec} data={barData} signalListeners={signalListeners} />,
document.getElementById('bar-container')
);
There is also a <VegaLite>
component that behaves like <Vega>
but always assume that the spec is vega-lite
spec (mode
is fixed to vega-lite
).
API
Props
React class Vega
and any output class from createClassFromSpec
have these properties:
Props from vega-embed's API
mode
, theme
, defaultStyle
, renderer
, logLovel
, tooltip
, loader
, patch
, width
, height
, padding
, actions
, scaleFactor
, config
, editorUrl
, sourceHeader
, sourceFooter
, hover
, i18n
, downloadFileName
CSS
class and style of the container <div>
element
- className:String
- style:Object
Data
- data:Object
For data
, this property takes an Object with keys being dataset names defined in the spec's data field, such as:
var barData = {
table: [{"x": 1, "y": 28}, {"x": 2, "y": 55}, ...]
};
Each value can be an array or function(dataset){...}
. If the value is a function, Vega's vis.data(dataName)
will be passed as the argument dataset
.
var barData = {
table: function(dataset){...}
};
In the example above, vis.data('table')
will be passed as dataset
.
- signalListeners:Object
All signals defined in the spec can be listened to via signalListeners
.
For example, to listen to signal hover, attach a listener like this
// better declare outside of render function
const signalListeners = { hover: handleHover };
<Vega spec={spec} data={barData} signalListeners={signalListeners} />
Event listeners
- onNewView:Function Dispatched when new vega.View is constructed and pass the newly created view as argument.
- onParseError:Function Dispatched when vega cannot parse the spec.
Static function
Any class created from createClassFromSpec
will have this method.
- Chart.getSpec() - return
spec
Frequently Asked Questions
How to use Vega Tooltip?
You can pass the vega-tooltip
handler instance to the tooltip
property.
import { Handler } from 'vega-tooltip';
<Vega spec={spec} data={barData} tooltip={new Handler().call} />
5 years ago