{"id":13421954,"url":"https://github.com/chartshq/react-muze","last_synced_at":"2026-01-12T06:52:25.939Z","repository":{"id":57101313,"uuid":"302344861","full_name":"chartshq/react-muze","owner":"chartshq","description":"React SDK for Muze charting Library","archived":false,"fork":false,"pushed_at":"2020-10-16T06:55:53.000Z","size":4231,"stargazers_count":16,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-20T06:08:55.794Z","etag":null,"topics":["charting-application","charts","datamodel","javascript-charts","muze","react","react-applications","react-bindings","webassembly"],"latest_commit_sha":null,"homepage":"https://muzejs.org/docs/wa/latest/muze/integrations/react-muze/introduction","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chartshq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-08T13:13:13.000Z","updated_at":"2023-03-08T06:26:16.000Z","dependencies_parsed_at":"2022-08-20T22:40:35.098Z","dependency_job_id":null,"html_url":"https://github.com/chartshq/react-muze","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chartshq%2Freact-muze","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chartshq%2Freact-muze/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chartshq%2Freact-muze/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chartshq%2Freact-muze/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chartshq","download_url":"https://codeload.github.com/chartshq/react-muze/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719086,"owners_count":20336591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charting-application","charts","datamodel","javascript-charts","muze","react","react-applications","react-bindings","webassembly"],"created_at":"2024-07-30T23:00:34.529Z","updated_at":"2026-01-12T06:52:25.898Z","avatar_url":"https://github.com/chartshq.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Framework-Specific Libraries"],"sub_categories":["Chart","Data Visualization","React"],"readme":"\u003ch3 align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://github.com/chartshq/react-muze\"\u003e\n    \u003cimg src=\"https://github.com/chartshq/react-muze/raw/master/logo.png\" alt=\"react-muze\" title=\"react-muze\" /\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n[![License](https://img.shields.io/github/license/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/blob/master/LICENSE)\n[![NPM version](https://img.shields.io/npm/v/@chartshq/react-muze.svg)](https://www.npmjs.com/package/@chartshq/react-muze)\n[![Contributors](https://img.shields.io/github/contributors/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/graphs/contributors)\n\n# React-Muze\n\n**React-Muze** is a React wrapper over the core [Muze](https://github.com/chartshq/muze) library. It provides React bindings for **Muze** and makes it easier to create charts using Muze for your React applications.\n\n### What is Muze?\nMuze 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 \u0026 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](https://muzejs.org/docs/wa/latest/introduction)\n\n# Installation \u0026 Usage\n\n## Installation\n\nTo use React-Muze in your React project, you need to install the **muze** and **react-muze** package from NPM.\n\n```shell\nnpm install @chartshq/muze @chartshq/react-muze\n```\n\nNext, 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.\n\n```shell\nnpm install copy-webpack-plugin@5.1.1 -D\n```\n\n### For a project created using Create-React-App \n\nSince 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](https://github.com/timarney/react-app-rewired)\n\n```shell\nnpm install react-app-rewired\n```\n\nNext, we need to create a file named `config-overrides.js` at the root of the project and add the following code in it\n\n```javascript\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst path = require(\"path\");\nmodule.exports = function override(config, env) {\n  //add webpack copy plugin\n  const copyPlugin = new CopyWebpackPlugin([\n    {\n      from: path.resolve(\"node_modules\", \"@chartshq/muze/dist\"),\n      to: '.',\n    }\n  ]);\n  if (!config.plugins) {\n    config.plugins = [];\n  }\n  config.plugins.push(copyPlugin);\n  return config;\n}\n```\n\nAnd finally, replace old start and build commands in your `package.json` with the following ones, and you are ready to go\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"react-app-rewired start\",\n    \"build\": \"react-app-rewired build\"\n  }\n}\n```\n\n### For a custom React project\n\nIn 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\n\n```javascript\n{\n  plugins: [\n    new CopyWebpackPlugin([\n      {\n        from: path.resolve(\"node_modules\", \"@chartshq/muze/dist\"),\n        to: '.',\n      }\n    ])\n  ]\n}\n```\n## Creating your first Chart \n\nFor this illustration, we will be using the following data and schema.\n\n```javascript\nconst data = [\n  {\n    Name: \"chevrolet chevelle malibu\",\n    Acceleration: 12,\n  },\n  {\n    Name: \"buick skylark 320\",\n    Acceleration: 11.5,\n  },\n  {\n    Name: \"plymouth satellite\",\n    Acceleration: 11,\n  },\n  {\n    Name: \"amc rebel sst\",\n    Acceleration: 12,\n  },\n];\nconst schema = [\n  {\n    name: \"Name\",\n    type: \"dimension\",\n  },\n  {\n    name: \"Acceleration\",\n    type: \"measure\",\n    defAggFn: \"avg\",\n  },\n];\n```\n\n### Step 1 - Import Muze, Canvas, DataModel as follows\n\n```jsx\nimport Muze, { Canvas } from \"@chartshq/react-muze/components\";\n``` \n\n### Step 2 - Create a DataModel Instance from the data\n\n```jsx\nasync function createDataModel() {\n  const DataModelClass = await Muze.DataModel.onReady();\n  const formattedData = await DataModelClass.loadData(data, schema);\n  return new DataModelClass(formattedData);\n}\n```\n\n### Step 3 - Rendering Muze \n\nIn the `render()` method of you react component, we need to put the following\n\n```jsx\nrender() {\n  // carsDm is the a dataModel instance\n  // created from `data` and `schema`,\n  // and saved on state\n  const { carsDm } = this.state;\n\n  return (\n    \u003cMuze data={carsDm}\u003e\n      \u003cCanvas rows={[\"Acceleration\"]} columns={[\"Name\"]} /\u003e\n    \u003c/Muze\u003e\n  );\n}\n```\n\n### Full Code of the example\n\n```javascript\nimport React from \"react\";\nimport Muze, { Canvas } from \"@chartshq/react-muze/components\";\n\nconst data = [\n  {\n    Name: \"chevrolet chevelle malibu\",\n    Acceleration: 12,\n  },\n  {\n    Name: \"buick skylark 320\",\n    Acceleration: 11.5,\n  },\n  {\n    Name: \"plymouth satellite\",\n    Acceleration: 11,\n  },\n  {\n    Name: \"amc rebel sst\",\n    Acceleration: 12,\n  },\n];\nconst schema = [\n  {\n    name: \"Name\",\n    type: \"dimension\",\n  },\n  {\n    name: \"Acceleration\",\n    type: \"measure\",\n    defAggFn: \"avg\",\n  },\n];\n\nasync function createDataModel() {\n  const DataModelClass = await Muze.DataModel.onReady();\n  const formattedData = await DataModelClass.loadData(data, schema);\n  return new DataModelClass(formattedData);\n}\n\nclass Chart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      carsDm: null,\n    };\n  }\n\n  componentDidMount() {\n    createDataModel().then((carsDm) =\u003e {\n      this.setState({ carsDm });\n    });\n  }\n\n  render() {\n    const { carsDm } = this.state;\n\n    return (\n      \u003cMuze data={carsDm}\u003e\n        \u003cCanvas rows={[\"Acceleration\"]} columns={[\"Name\"]} /\u003e\n      \u003c/Muze\u003e\n    );\n  }\n}\n\nexport default Chart;\n```\n\n# Examples\n\nIn the example directory, you will find a react application that has many examples as individual components.\n\n### How to run the examples\n\nSetup the project in your local environment\n\n```shell\nyarn install\nyarn build\ncd dist \u0026\u0026 yarn link / npm link --only=production\nyarn watch-build\n```\n\nGo to the examples directory and run the following commands\n\n```shell\nyarn install\nyarn link @chartshq/react-muze\nyarn start\n```\n\nTo try out all the other examples, inside the `examples/src/index.js` file import an example component and render on `jsx`. For example,\n\n```jsx\n// import BoxPlot from './Examples/Composability/BoxPlot';\nimport SimplePieChart from './Examples/Pie/SimplePie';\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cSimplePieChart /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n# Contributing\n\nYour PRs and stars are always welcome :). Checkout the [Contributing](https://github.com/chartshq/react-muze/blob/master/CONTRIBUTING.md) guides.\n\n# Roadmap\n\nPlease contribute to our public wishlist or upvote an existing feature at [Muze Public Wishlist \u0026 Roadmap](https://github.com/orgs/chartshq/projects/1).\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchartshq%2Freact-muze","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchartshq%2Freact-muze","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchartshq%2Freact-muze/lists"}