@codux-boards/react-nivo

@codux-boards/react-nivo

Nivo is a customizable, responsive charts library for creating beautiful, meaningful, data visualization in React.

This package provides ready-to-use Nivo chart components specifically designed for use within the Codux visual editor. Once installed, these components appear in your Codux Add Elements panel, enabling easy drag-and-drop integration of powerful data visualizations into your projects.

Features

• Pre-configured Nivo chart components
• Seamless integration with Codux's visual editor
• Responsive design
• Customizable through Codux's interface
• Available visualizations include:
  • Line charts
  • Bar charts
  • Pie charts
  • Area charts
  • Scatter plots
  • Heatmaps
  • And more...

Installation & Usage

Automatic

1. When creating a new project using Codux, select Nivo to add it as a library.
2. Open the Add Elements panel when viewing your app or boards. There you'll find Nivo under the "External Libraries" category.
3. Drag on stage, or click to select any Nivo component to add it to your current selection on the Stage.

Manual

1. Install the package in your Codux project:

npm i -S @nivo/<component-name>

or

yarn add @nivo/<component-name>

1. Install the Codux Nivo integration as a devDependency:

npm i -D @codux-boards/react-nivo

or

yarn add -D @codux-boards/react-nivo

1. Open your project in Codux.
2. Open your Codux configuration, and add the following:

"addPanel": {
    "assets": [
      "@codux-boards/react-nivo"
    ]
  }

1. Open an App or Board in the project.
2. Open to the Add Elements panel.
3. Find Nivo under the "External Libraries" category.
4. Drag and drop charts onto the Stage.
5. Customize data and styling using Codux's visual interface.

Requirements

• Codux editor installed
• React 18+
• Node.js 20+

License

MIT

Author

Codux Team