Bar Example

gistfile1.txt

import React from "react";
import Plot from "react-plotly.js";

const BarChart = ({ arr = false, obj, rect, title }) => {
  if (!rect) {
    return null;
  }

  const { height, width } = rect;

  return (
    <Plot
      data={[
        {
          x: arr ? arr.map((val, idx) => idx) : Object.keys(obj),
          y: arr ? arr : Object.values(obj),
          type: "bar",
          text: arr
            ? arr.map((val, idx) => idx).reverse()
            : Object.keys(obj).map(String),
          marker: { color: "rgb(29, 161, 60)" },
        },
      ]}
      layout={{ width, height, title }}
    />
  );
};

export { BarChart };