Working with the React Charts Component Library

If you want to add some visual flair to your project, you can use our stunning collection of ready-made components from the React Charts component library. These components are fully customizable and interactive, and they come with all the necessary imports, hooks, states, JSX properties, styling, and more. You can easily drag and drop them into your boards, or preview them in the Add Elements panel before using them. Our React Charts components will help you create beautiful and engaging data visualizations for your project.
To add our rich content library to the Add Elements panel, follow these steps:
  1. Install the React Charts library's dependencies.
  2. Install the Codux rich content npm package (@codux-boards/react-charts).
  3. Add the library name to codux.config.json (addPanel/assets key).

1. Install the React Charts library's dependencies 

Install the React Charts library and its dependencies with the following command:
1
npm install react-charts@beta --save
Or, if your project uses yarn:
1
yarn add react-charts@beta
Refer here for their official documentation.

2. Install the rich content npm package 

Install the Codux React Charts rich content npm package to see the library's components in their ready-for-use states in the Add Elements panel:
1
npm i -D @codux-boards/react-charts
If your project uses yarn, use the equivalent command instead.

3. Add the library name to codux.config.json 

Add the rich content library installed in the step above to your project's codux.config.json file through the addPanel/assets key like this:
1
2
3
4
5
6
7
8
// codux.config.json
   
{  
  …
  "addPanel": {
      "assets": ["@codux-boards/react-charts"]
  },
   …
And you're ready to use the React Charts rich content library in Codux!
IN THIS ARTICLE