react-vega-lite
Convert Vega Lite spec into React class conveniently, inspired by this tutorial by @pbeshai
react-vega-lite: 1.x.x
was update with breaking changes to support Vega-Lite 2.0, which is still in beta.
If you are looking to use React with Vega Lite 1.x, please use react-vega-lite: 0.0.1
.
Examples
Install
npm install vega vega-lite react-vega react-vega-lite --save
Example code
There are two approaches to use this libary.
Approach#1 Create class from spec, then get a React class to use
BarChart.js
;; 'BarChart' "description": "A simple bar chart with embedded data." "mark": "bar" "encoding": "x": "field": "a" "type": "ordinal" "y": "field": "b" "type": "quantitative" ;
main.js
;;; const barData = "values": "a": "A""b": 20 "a": "B""b": 34 "a": "C""b": 55 "a": "D""b": 19 "a": "E""b": 40 "a": "F""b": 34 "a": "G""b": 91 "a": "H""b": 78 "a": "I""b": 25 ; ReactDOM;
<VegaLite>
generic class and pass in spec
for dynamic component.
Approach#2 Use Provides a bit more flexibility, but at the cost of extra checks for spec changes.
main.js
;;; const spec = "description": "A simple bar chart with embedded data." "mark": "bar" "encoding": "x": "field": "a" "type": "ordinal" "y": "field": "b" "type": "quantitative" ; const barData = "values": "a": "A""b": 20 "a": "B""b": 34 "a": "C""b": 55 "a": "D""b": 19 "a": "E""b": 40 "a": "F""b": 34 "a": "G""b": 91 "a": "H""b": 78 "a": "I""b": 25 ; ReactDOM;
Props
React class VegaLite
and any output class from createClassFromLiteSpec
have these properties:
-
className:String
-
style:Object
-
width:Number
-
height:Number
-
padding:Object
-
renderer:String
-
logLevel:Number
-
background:String
-
enableHover:Boolean
-
data:Object
-
onSignalXXX
-
onNewView
-
onParseError
which are the same with react-vega
. Please refer to react-vega documentation.
Static function
Any class created from createClassFromLiteSpec
will have this function.
- Chart.getSpec() - return
spec
Frequently Asked Questions
How to use Vega Tooltip?
You can pass the vega-tooltip
handler instance to the tooltip
property.
; <VegaLite spec=spec data=barData tooltip=call />