react-svg-donut-chart/es/Segment/index.js

A lightweight responsive donut chart React component using only SVG

import React from "react";
import PropTypes from "prop-types";

import { center, radius } from "../constants";

var Segment = function Segment(_ref) {
  var stroke = _ref.stroke,
      strokeDasharray = _ref.strokeDasharray,
      strokeDashoffset = _ref.strokeDashoffset,
      strokeWidth = _ref.strokeWidth,
      title = _ref.title;
  return React.createElement(
    "circle",
    {
      cx: center.x,
      cy: center.y,
      r: radius,
      fill: "none",
      stroke: stroke,
      strokeWidth: strokeWidth,
      strokeDasharray: strokeDasharray,
      strokeDashoffset: strokeDashoffset
    },
    title && React.createElement(
      "title",
      null,
      title
    )
  );
};

Segment.propTypes = process.env.NODE_ENV !== "production" ? {
  stroke: PropTypes.string.isRequired,
  strokeDasharray: PropTypes.string.isRequired,
  strokeDashoffset: PropTypes.number.isRequired,
  strokeWidth: PropTypes.number,
  title: PropTypes.string,
  value: PropTypes.number.isRequired
} : {};

Segment.defaultProps = {
  strokeWidth: 5
};

export default Segment;