@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

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

Manual

• Install the package in your Codux project:

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

or

yarn add @nivo/<component-name>

• Install the Codux Nivo integration as a devDependency:

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

or

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

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

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

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

Requirements

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

License

MIT

Author

Codux Team