React VizGrammar is a wrapper around Victory JS and it makes charting easier by adding boilerplate code so that designers and developers can get started and set it up in a few minutes.
A chart can be embedded in a React environment simply by using the VizG react component.
import VizG from 'react-vizgrammar';<VizG = = = />
Where the props?
configis the widget configurations specified as a JSON object.
datais the array of data sets fed to the charts.
metadatais the JSON object that contains information about the provided dataset.
Checkout the samples and documentation.
Users have to provide parameters for the widget using config object in order to create the chart type they require. It is a JSON object that has a well defined configuration attributes to customize the chart.
The following is a basic configuration to plot a line chart:
let config =x : "rpm"charts : type: "line" y : "torque" color: "EngineType"maxLength: 10width: 400height: 200
metadata prop and
config is provided, user can provide a dataset to visualize the chart. For easy interpretation React-VizGrammar requires this dataset to be arranged in a tabular way similar to the way explained below.
metadata ="names": "Column1" "Column2"..."types": 'ordinal' 'linear'...;
metadata.names is an array which consists of column names/fields of the table and
metadata.types contains their types
(ordinal, time or linear),
types are aligned together in a way that "Column1" => 'ordinal' and "Column2" => 'linear' and so on.
data ="value1" numericValue1..."value2" numericValue2...;
data is a collection of arrays of data rows. Each row is stored as an array and their element order follows the order of
Sample data table would be like following:
metadata ="names" : "rpm" "torque" "horsepower" "EngineType""types" : "linear" "linear" "ordinal" "ordinal";data =8000 75 120 "Piston" 9000 81 130 "Rotary";
These prerequisites must be installed before proceeding with the build process.
Build the Library
In order to build React-VizGrammar from the sources, clone this repository and run the following commands in the terminal from the react-vizgrammar directory.
npm installnpm run build
Build and run samples
In order to build and start the dev-server and view the samples, run the following command inside the main directory after installing the npm dependencies.
npm run samples