usePicasso.md

usePicasso

Renders a picasso.js visualization to an html element. If any of the input parameters are changed/updated (typically the layout), the rendered chart will be updated. For picasso.js docs, head over to picassojs.com.

In addition to React 16.8.1 or later, picasso.js and picasso-plugin-q must be installed to use this hook.

The q plugin must be registered on the picasso global scope, in order for picasso to understand the QIX hypercube.

picasso.use(picassoQ);

Usage

import { useRef } from 'react';
import { usePicasso } from 'hamus.js';
import picasso from 'picasso.js';
import picassoQ from 'picasso-plugin-q';

picasso.use(picassoQ);

const Demo = (settings, layout) => {
  const element = useRef(null);
  const layout = usePicasso(element, settings, layout);
  
  return (
    <div className="chart-div" ref={element} />
  );
};

Reference

• The element is the html element where the chart will be rendered.
• settings is the picasso.js settings object (docs) which contains info about the chart (components, scales etc).
• layout is the object containing the hypercube data which will be shown in the chart.