CODEWITHSUNDEEP
javascriptvue.jschart.jsvue-chartjs
Jarek Tkaczyk
Jarek Tkaczyk

Reputation: 81187

how to format label on PolarArea chart.js vue-chartjs

I've got vue chartjs setup and I want to format label/show 95.7% instead of raw 0.957 as in the screenshot. Same setup I try here works for Line chart, but can't make it work in PolarArea.

    "chart.js": "^4.3.0",
    "vue-chartjs": "^5.2.0",

enter image description here

    polarOptions() {
      return {
        plugins: {
          // tried a plugin, no luck..
          labels: {
            type: "percentage",
            render: "percentage",
            fontColor: ["green", "white", "red"],
            precision: 2,
          },
        },

        // tried this extra, no luck
        tooltips: {
          callbacks: {
            label: function (tooltipItem: any) {
              return tooltipItem.rLabel.toFixed(0);
            },
          },
        },

        scales: {
          r: {
            ticks: {  
              // exactly this works just fine on Line chart, but not here
              callback: (value: number) => `${(value * 100).toFixed()}%`,
              format: {
                style: "percent",
              },
            },
          },
        },
      };
    },

Upvotes: 0

Views: 298

Answers (1)

Jarek Tkaczyk
Jarek Tkaczyk

Reputation: 81187

So plugins.tooltip.callbacks.label seems to do the job.

I don't like the way it looks, so happy to see if there's smoother way to do it

    polarOptions() {
      return {
        plugins: {
          tooltip: {
            callbacks: {
              label(context: any) {
                const value = (context.raw * 100).toFixed(1);
                return `${context.dataset.label}: ${value}%`;
              },
            },
          },
        },
      ...

Upvotes: 0

Related Questions