react-pie-chart-easy/dist/index.js

A simple and customizable React pie chart component. React pie chart component which is very easy to use and have multiple configuration options for more customization.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactChartjs = require("react-chartjs-2");
var _chart = require("chart.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
_chart.Chart.register(_chart.ArcElement, _chart.Tooltip, _chart.Legend);
var ReactPieChart = function ReactPieChart(_ref) {
  var data = _ref.data,
    _ref$backgroundColor = _ref.backgroundColor,
    backgroundColor = _ref$backgroundColor === void 0 ? [] : _ref$backgroundColor,
    _ref$borderColor = _ref.borderColor,
    borderColor = _ref$borderColor === void 0 ? [] : _ref$borderColor,
    _ref$radius = _ref.radius,
    radius = _ref$radius === void 0 ? 100 : _ref$radius,
    _ref$animate = _ref.animate,
    animate = _ref$animate === void 0 ? "no" : _ref$animate,
    _ref$zoom = _ref.zoom,
    zoom = _ref$zoom === void 0 ? false : _ref$zoom,
    _ref$rotate = _ref.rotate,
    rotate = _ref$rotate === void 0 ? 0 : _ref$rotate,
    _ref$showLegend = _ref.showLegend,
    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
    _ref$cutout = _ref.cutout,
    cutout = _ref$cutout === void 0 ? 0 : _ref$cutout;
  var chartData = {
    labels: data.map(function (item) {
      return item.title;
    }),
    datasets: [{
      data: data.map(function (item) {
        return item.value;
      }),
      backgroundColor: backgroundColor.length > 0 ? backgroundColor : data.map(function (item) {
        return item.color;
      }),
      borderColor: borderColor.length > 0 ? borderColor : data.map(function (item) {
        return "white";
      }),
      borderWidth: 1
    }]
  };
  var options = {
    responsive: true,
    plugins: {
      tooltip: {
        callbacks: {
          label: function label(tooltipItem) {
            return data[tooltipItem.dataIndex].tooltip || tooltipItem.raw;
          }
        }
      },
      legend: {
        display: showLegend
      }
    },
    animation: animate === "yes" ? {
      animateScale: true,
      animateRotate: true
    } : false,
    elements: {
      arc: {
        borderWidth: 2,
        radius: radius
      }
    },
    rotation: rotate,
    cutout: cutout
  };
  if (zoom) {
    options.plugins.zoom = {
      pan: {
        enabled: true,
        mode: "xy"
      },
      zoom: {
        enabled: true,
        mode: "xy"
      }
    };
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      width: "100%",
      height: "100%",
      position: "relative"
    }
  }, /*#__PURE__*/_react["default"].createElement(_reactChartjs.Pie, {
    data: chartData,
    options: options
  }));
};
var _default = exports["default"] = ReactPieChart;