react-muze alternatives and similar libraries
Based on the "Chart" category.
Alternatively, view react-muze alternatives based on common mentions on social networks and blogs.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
chartify
๐ ๐ ๐ React.js plugin for building charts using CSS -
rumble-charts
React components for building composable and flexible charts -
react-sigmajs
Lightweight React library for drawing network graphs built on top of SigmaJS -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-sparkline
React component for rendering simple sparklines -
react-micro-bar-chart
React component for micro bar-charts rendered with D3 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-muze or a related project?
README
React-Muze
React-Muze is a React wrapper over the core Muze library. It provides React bindings for Muze and makes it easier to create charts using Muze for your React applications.
What is Muze?
Muze is a free library for creating exploratory data visualizations in the browser that is powered by WebAssembly. It is ideal for use in visual analytics dashboards & applications to create highly performant, interactive, multi-dimensional, and composable visualizations with the Grammar of Graphics approach. More about Muze here: https://muzejs.org/docs/wa/latest/introduction
Installation & Usage
Installation
To use React-Muze in your React project, you need to install the muze and react-muze package from NPM.
npm install @chartshq/muze @chartshq/react-muze
Next, as Muze is built on top of WebAssembly, we need to copy some WebAssembly assets to our build directory. To accomplish that we are going to use the copy-webpack-plugin
NPM package in our build config.
npm install [email protected] -D
For a project created using Create-React-App
Since applications built with Create-React-App does not expose webpack config until ejected, we need to use the react-app-rewired
package, to add the custom webpack config. How it works here: react-app-rewired
npm install react-app-rewired
Next, we need to create a file named config-overrides.js
at the root of the project and add the following code in it
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = function override(config, env) {
//add webpack copy plugin
const copyPlugin = new CopyWebpackPlugin([
{
from: path.resolve("node_modules", "@chartshq/muze/dist"),
to: '.',
}
]);
if (!config.plugins) {
config.plugins = [];
}
config.plugins.push(copyPlugin);
return config;
}
And finally, replace old start and build commands in your package.json
with the following ones, and you are ready to go
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
}
}
For a custom React project
In a custom setup, since we have direct access to webpack config, we can simply add copy-webpack-plugin
configuration directly inside out webpack config. Just add the following config in the plugins
section of your webpack.config.js
file
{
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve("node_modules", "@chartshq/muze/dist"),
to: '.',
}
])
]
}
Creating your first Chart
For this illustration, we will be using the following data and schema.
const data = [
{
Name: "chevrolet chevelle malibu",
Acceleration: 12,
},
{
Name: "buick skylark 320",
Acceleration: 11.5,
},
{
Name: "plymouth satellite",
Acceleration: 11,
},
{
Name: "amc rebel sst",
Acceleration: 12,
},
];
const schema = [
{
name: "Name",
type: "dimension",
},
{
name: "Acceleration",
type: "measure",
defAggFn: "avg",
},
];
Step 1 - Import Muze, Canvas, DataModel as follows
import Muze, { Canvas } from "@chartshq/react-muze/components";
Step 2 - Create a DataModel Instance from the data
async function createDataModel() {
const DataModelClass = await Muze.DataModel.onReady();
const formattedData = await DataModelClass.loadData(data, schema);
return new DataModelClass(formattedData);
}
Step 3 - Rendering Muze
In the render()
method of you react component, we need to put the following
render() {
// carsDm is the a dataModel instance
// created from `data` and `schema`,
// and saved on state
const { carsDm } = this.state;
return (
<Muze data={carsDm}>
<Canvas rows={["Acceleration"]} columns={["Name"]} />
</Muze>
);
}
Full Code of the example
import React from "react";
import Muze, { Canvas } from "@chartshq/react-muze/components";
const data = [
{
Name: "chevrolet chevelle malibu",
Acceleration: 12,
},
{
Name: "buick skylark 320",
Acceleration: 11.5,
},
{
Name: "plymouth satellite",
Acceleration: 11,
},
{
Name: "amc rebel sst",
Acceleration: 12,
},
];
const schema = [
{
name: "Name",
type: "dimension",
},
{
name: "Acceleration",
type: "measure",
defAggFn: "avg",
},
];
async function createDataModel() {
const DataModelClass = await Muze.DataModel.onReady();
const formattedData = await DataModelClass.loadData(data, schema);
return new DataModelClass(formattedData);
}
class Chart extends React.Component {
constructor(props) {
super(props);
this.state = {
carsDm: null,
};
}
componentDidMount() {
createDataModel().then((carsDm) => {
this.setState({ carsDm });
});
}
render() {
const { carsDm } = this.state;
return (
<Muze data={carsDm}>
<Canvas rows={["Acceleration"]} columns={["Name"]} />
</Muze>
);
}
}
export default Chart;
Examples
In the example directory, you will find a react application that has many examples as individual components.
How to run the examples
Setup the project in your local environment
yarn install
yarn build
cd dist && yarn link / npm link --only=production
yarn watch-build
Go to the examples directory and run the following commands
yarn install
yarn link @chartshq/react-muze
yarn start
To try out all the other examples, inside the examples/src/index.js
file import an example component and render on jsx
. For example,
// import BoxPlot from './Examples/Composability/BoxPlot';
import SimplePieChart from './Examples/Pie/SimplePie';
ReactDOM.render(
<React.StrictMode>
<SimplePieChart />
</React.StrictMode>,
document.getElementById("root")
);
Contributing
Your PRs and stars are always welcome :). Checkout the Contributing guides.
Roadmap
Please contribute to our public wishlist or upvote an existing feature at Muze Public Wishlist & Roadmap.
License
MIT
*Note that all licence references and agreements mentioned in the react-muze README section above
are relevant to that project's source code only.