vue-chartjs Format Percentage for Y

Feb 22, 2021
<template>  <div>    <bar-chart :chart-data="barChartData" :options="barChartOptions" :width="800" :height="300" />  </div></template><script>export default {  data() {    return {      barChartData: {        datasets: [          {            label: 'Profit',            data: [0.1, 0.2, 0.5, -0.2, 0.05]          }        ],        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May']      },      barChartOptions: {        tooltips: {          callbacks: {            label: (tooltipItem, data) => {              const label = data.datasets[tooltipItem.datasetIndex].label;              const value = this.formatPercentage(tooltipItem.yLabel);              return `${label}: ${value}`            }          }        },                scales: {          yAxes: [            {              ticks: {                // min: -1,                // max: 1,                callback: (value) => {                  return this.formatPercentage(value)                },                beginAtZero: true              },              scaleLabel: {                display: true              }            }          ]        }      }    }  },  methods: {    formatPercentage(value) {      return Number(value).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});    },  }}</script>

Chartjs Format Percentage

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.