react-chart-js-2 - adding punctuation to label(s)?

Question

I would like a dollar sign to be displayed for each dollar amount shown in this donut chart:

It's not killing me or anything, but it would be nice.

I have tried every combination of syntax that I can think of.

Full disclosure - I'm relatively new, but I'm really motivated to learn, so...

Here is my code:

  const [open, setOpen] = React.useState(false);
  const classes = useStyles();

  const holdings = useSelector((store) => store.holdingsReducer); //everything the user has in their database

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    return;
  };

  let namesArray = [];
  const loopNames = () => {
    for (let item of holdings) {
      namesArray.push(item.name);
    }
    return namesArray;
  };

  let donutArray = [];
  const loopHoldings = () => {
    let donutArray = [];
    for (let item of holdings) {
      let val = (item.coins_held * item.per_coin_val).toFixed(2);
      donutArray.push(val);
    }
    return donutArray;
  };

AND HERE IS THE RETURN BLOCK:

    <div>
      <Button
        style={{
          textAlign: "center",
          fontSize: "24px",
          paddingBottom: "0px",
          backgroundColor: "#9333F0",
          color: "white",
        }}
        variant="contained"
        size="medium"
        onClick={handleClickOpen}
        className={classes.pieButton}
      >
        <b>
          <DonutLargeIcon
            style={{
              transform: "scale(1.5)",
              paddingTop: "8px",
              paddingBottom: "2px",
            }}
          />
        </b>
      </Button>

      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
      >
        <Doughnut
          style={{ padding: "5px" }}
          data={{
            labels: loopNames(),
            datasets: [
              {
                data: loopHoldings(),
                backgroundColor: [
                  "#613BED",
                  "#44E059",
                  "#D747F5",
                  "#3ED2F7",
                  "#F7EE3E",
                  "#CDD6E3",
                  "#F2DFC2",
                  "#FA6534",
                ],
              },
            ],
          }}
          height={400}
          width={400}
          options={{
            plugins: {
              legend: true,
            },
            animations: true,
            maintainAspectRatio: true,
          }}
        />

        <DialogActions>
          <Container style={{ textAlign: "right", marginBottom: "5px" }}>
            <Button
              style={{
                textAlign: "center",
                fontSize: "14px",
                fontWeight: "bold",
                backgroundColor: "#9333F0",
                color: "white",
              }}
              className={classes.dialogueButtons}
              onClick={handleClose}
            >
              Close
            </Button>
          </Container>
        </DialogActions>
      </Dialog>
    </div>
  );
}```

**THANKS, ALL!**

score 0 · Answer 1 · answered Nov 04 '21 at 23:32

0

add tooltip callback to options

options:{
   tooltips: {
      callbacks: {
         label: (tooltipItem: any, data: any) => {
             return `${data.datasets[tooltipItem.datasetIndex].label}: ${tooltipItem.yLabel} $`
         }
      }
   }
}

answered Nov 04 '21 at 23:32

Madhuri

1,060
5
17

I'm not using TS, by the way. Also, the syntax isn't quite in line w/ Chart JS 2 here, I don't think (and the $ is not appearing). Is the options: that you have included NESTED inside the main options= that I have in my code? – Chris Mo May 05 '22 at 16:14

react-chart-js-2 - adding punctuation to label(s)?

1 Answers1