Cube is visualization-agnostic, so you can build any user interface for your application.
The client has methods to communicate with Cube API Gateway and retrieve and process data. It is designed to work with existing charting libraries including Chart.js, D3.js, and more.
The client provides methods to solve common tasks:
Learn more in the documentation for
The package provides convenient tools to work with Cube in React:
Hooks. You can add the useCubeQuery hook to functional React components to execute Cube queries.
Components. You can use QueryBuilder and QueryRenderer components to separate state management and API calls from your rendering code. You can also use CubeProvider and CubeContext components for direct access to Cube Client anywhere in your application.
Here are the typical steps to query and visualize analytical data in React:
@cubejs-client/reactpackages. These packages provide all the necessary methods and convenient React tools.
- Query data from Cube Backend. In functional React components, use the
- Transform data for visualization. The result set has convenient methods,
chartPivot, to prepare data for charting.
- Visualize the data. Use tools of your choice to draw charts and create visualizations.
See an example of using Cube with React and Chart.js library. Note that you can always use a different charting library that suits your needs:
npm install --save @cubejs-client/core @cubejs-client/react
yarn add @cubejs-client/core @cubejs-client/react