const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div
        style={{
          backgroundColor: "white",
          border: "1px solid gray",
          padding: "0.5rem"
        }}
      >
        <p style={{ margin: "0" }}>{label}</p>
        {payload.map((data, index) => {
          return (
            <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${
              data.name
            } : ${data.value.toFixed(1)}`}</p>
          );
        })}
      </div>
    );
  }

  return null;
};

export default CustomTooltip;
