CODEWITHSUNDEEP
apexcharts
Steve Pritchard
Steve Pritchard

Reputation: 11

GBP currency conversion of Apex Charts data labels

I'm learning to work with Apexcharts and need to show the labels (Y axis labels an data labels) as currency (GBP) but can't seem to find the right approach. I have looked at the locale code, but really not sure how to integrate this into my chart.

I'm trying to ensure that 1000 become 1,000 etc.

Below is the chart code

<script>

   var options = {
     series: [

       {
       name: "Price in £s",
         data: [1000, 2000, 2500, 3000, 4800, 6000]
     }

   ],
     chart: {

     height: 350,
     type: 'bar',
     id: 'areachart-2',

           dropShadow: {
       enabled: true,
       color: '#000',
       top: 18,
       left: 7,
       blur: 10,
       opacity: 0.2
     },
     toolbar: {
       show: false
     }
   },


   colors: ['#f6564d', '#545454'],
   dataLabels: {
     enabled: false,
     textAnchor: 'middle',
     formatter: function(val, index) {
    return val.toFixed(0);
  }
   },
   stroke: {
     curve: 'straight'
   },
   title: {
       text: '',
     align: 'left'
   },
   grid: {
     borderColor: '#f1f1f1',
     row: {
       colors: ['#fff', 'transparent'], // takes an array which will be repeated on columns
       opacity: 0.5
     },
   },
   markers: {
     size: 100
   },
   xaxis: {
     categories: ['01/05/22','01/06/22','01/07/22','01/08/22','01/09/22','01/10/22'],

     title: {
       text: 'Month'
     }

   },
   yaxis: {

       min:00,

     title: {
       text: 'Price in GBP',

     },

   },
   legend: {
     position: 'top',
     horizontalAlign: 'right',
     floating: true,
     offsetY: 100,
     offsetX: 100
   }
   };

   var chart = new ApexCharts(document.querySelector("#chart"), options);
   chart.render();


</script>

Upvotes: 1

Views: 3703

Answers (3)

fotiecodes
fotiecodes

Reputation: 626

I had the same issue today and fixed it by adding the labels formatter to yaxis as seen below:

yaxis: {
        labels: {
          formatter: (value) => {
            return `${parseInt(value)} GBP`;
          },
        },
        title: {
          text: "Expenses per month",
        },
      },

note how we perse the value and append 'GBP'

Hope that helps!

Upvotes: 0

Shabnam Khan
Shabnam Khan

Reputation: 77

Axes labels formatting can be controlled by yaxis.labels.formatter and xaxis.labels.formatter.

yaxis: {
  labels: {
    formatter: function (value) {
      return value + "$";
    }
  },
},
xaxis: {
  labels: {
    formatter: function (value) {
      return value;
    }
  }
}

Upvotes: 0

Patryk Laszuk
Patryk Laszuk

Reputation: 1440

In yaxis add labels formatter

labels:{
  formatter: (value) => {
    return `${numberWithCommas(value)} GBP`;
  },
},

And use this regex to add commas

function numberWithCommas(x) {
  return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

Upvotes: 3

Related Questions