js/react

Description:

• Use the billboard.js/react subpath to render billboard.js charts in React. The component preserves the existing ChartOptions API and receives the billboard namespace through the bb prop, so importing this React subpath does not pull the root billboard.js bundle into non-React user bundles.

Source:

• react/index.ts, line 33

Examples

import bb, {line} from "billboard.js";
import BillboardJS from "billboard.js/react";

<BillboardJS
  bb={bb}
  options={{
    data: {
      columns: [["data1", 30, 120, 80]],
      type: line()
    }
  }}
/>;

import bb, {canvas, line} from "billboard.js/canvas";
import BillboardJS from "billboard.js/react";

<BillboardJS
  bb={bb}
  type={line}
  modules={[canvas]}
  style={{
    width: "480px",
    height: "320px"
  }}
  options={{
    render: {
      mode: "canvas"
    },
    size: {
      width: 480,
      height: 320
    },
    data: {
      columns: [["data1", 30, 120, 80]]
    }
  }}
/>;

import bb, {line, zoom} from "billboard.js";
import {Chart} from "billboard.js/react";

<Chart
  bb={bb}
  type={line}
  modules={[zoom]}
  options={{
    data: {
      columns: [["data1", 30, 120, 80]]
    },
    zoom: {
      enabled: true
    }
  }}
/>;

// UMD: 'dist/billboard.react.js' exposes the 'BillboardReact' global, holding
// the same component as both '.Chart' and '.default'. React is expected on the
// page as the 'React' global, so this path needs a UMD build of React - React
// 18 and below ship one, React 19 does not.
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<link rel="stylesheet" href="$YOUR_PATH/billboard.css">
<script src="$YOUR_PATH/billboard.pkgd.js"></script>
<script src="$YOUR_PATH/billboard.react.js"></script>

<div id="root"></div>
<script>
  const {Chart} = BillboardReact;

  ReactDOM.createRoot(document.getElementById("root")).render(
    React.createElement(Chart, {
      bb,
      options: {
        data: {
          columns: [["data1", 30, 120, 80]],
          type: "line"
        }
      }
    })
  );
</script>