Powerful Data Visualization for React

Leverage the full potential of the CanvasXpress charting library with a seamless, declarative React component

Integrate Stunning Charts with Ease

CanvasXpress is a robust and versatile JavaScript library for data visualization, renowned for its wide variety of chart types and deep customization options. Originally designed for complex bioinformatics data, it's powerful enough for any data-intensive application.

The official canvasxpress-react component provides a simple and declarative way to harness the full power of CanvasXpress within the modern React ecosystem. This guide consolidates information from the official documentation and examples to get you started.

Getting Started: A Quick Tutorial

1. Installation

First, add CanvasXpress and its React wrapper to your project using npm or yarn.

npm install canvasxpress canvasxpress-react

2. Basic Usage

Import the component and pass your data and configuration as props. It's that simple.


import React from 'react';
import CanvasXpressReact from 'canvasxpress-react';

const MyChart = () => {
  const data = {
    y: {
      vars: ['Gene1', 'Gene2', 'Gene3'],
      smps: ['SampleA', 'SampleB'],
      data: [[10, 20], [15, 25], [5, 30]],
    },
  };

  const config = {
    graphType: 'Bar',
    title: 'Gene Expression Levels',
  };

  return (
    <div>
      <CanvasXpressReact
        data={data}
        config={config}
        width={600}
        height={400}
      />
    </div>
  );
};

export default MyChart;

Live Demos & Official Resources

Interactive CodeSandbox

Experiment with a live, running CanvasXpress React app. Change data, update configs, and see results instantly

Main GitHub Repository

The source code for the `canvasxpress-react` wrapper component.

Example GitHub Repository

A repository containing a complete, single-file example of a CanvasXpress React application.

Frequently Asked Questions

How do I update a chart after it has been rendered?

The `CanvasXpressReact` component will automatically re-render when its props (`data`, `config`, etc.) change. Simply update the state in your parent component, and the chart will update to reflect the new data or configuration.

Can I listen to chart events, like clicks or mouseovers?

Yes. You can pass an `events` prop to the component. This prop should be an object where keys are the event names (e.g., 'click', 'mouseover') and values are the callback functions to execute.

Is it possible to access the underlying CanvasXpress chart instance?

You can get a reference to the chart instance by passing a `target` prop to the `CanvasXpressReact` component. This is useful for calling methods directly on the chart object for advanced use cases.