Using Numeral.js to round JSON numbers in %

Question

I am fetching json data from a API and I have to display some of the numbers as %. The json data displays them as 0.00. I tried this method, but it didn't work. I want to use a url to fetch my data, and then use Numeral.js to make the filtered data I got in %. What am I doing wrong? I create a template for my graph. I then make a fetch request to get my data and filter it, so I get the values I need. Then I take that value and try to format it. The new value I want to put on the graph.

const data = {
  labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  datasets: [
    {
      label: "ADOPTION",
      data: [18, 12, 6, 9, 12, 3, 9],
      backgroundColor: "rgba(73, 117, 197, 1)",
      borderColor: "rgba(73, 117, 197, 1)"
    },
    {
      label: "Target",
      data: [0.654, 0.654, 0.751],
      backgroundColor: "rgba(236, 123, 46, 1)",
      borderColor: "rgba(236, 123, 46, 1)"
    }
  ]
};
// config for graph
const config = {
  type: "line",
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'data'
      },
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

// render init block
const myChart = new Chart(
  document.getElementById("data"),
  config
);

// Fethc block  for the   graph
async function fetchJSON() {
  const url="link";
  const response = await fetch(url);
  //* loads waiting to complete the request
  const datapoints = await response.json();
  return datapoints;
}

fetchJSON().then((datapoints) => {
  const month = datapoints.map(function (index) {
    return index.PERIOD_NAME; //*reffers to jSon word from file
  });
  console.log(month);
  myChart.config.data.labels = month;
  myChart.update();
});

fetchJSON().then((datapoints) => {
  const total = datapoints.map(function (index) {
    return index.ADOPTION //*reffers to jSon word from file
  });
  var string = numeral(datapoints).format('0.000%');
  console.log(string);
  myChart.config.data.datasets[0].data = total;
  myChart.update();
});

<div class="col-sm-12 col-md-4 col-lg-4">
            <canvas id="data"></canvas>
 </div>
 
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Answer 1

I'm guessing datapoints is an array. Numeral takes numbers or strings that it trys to convert into a number. You can use datapoints.map(val => numeral(val).format('0.00%')) to format the datapoints elements.