CODEWITHSUNDEEP
reactjstypescriptapexcharts
jonson.ncube
jonson.ncube

Reputation: 234

React ApexChart changing tooltip formatter dots to commas

I am developing a German app and they do not use dots (20.00) in numbers, they use commas (20,00). Using react-apexcharts, how do I replace the dots in my chart and tools. Any direction will be appreciated, I have been stuck for days now :(

enter image description here

import { ApexOptions } from 'apexcharts';
import { FC } from 'react';
import ReactApexChart from 'react-apexcharts';

interface IGraphProps extends ApexOptions {
    className?: string;
    label: string[];
    values: number[] | string[];
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    colorHexCodes?: string[];
}

export const DonutChart: FC<IGraphProps> = ({
    className,
    label,
    values,
    legendPosition = 'bottom',
    colorHexCodes
}) => {
    const options = {
        labels: ['Energie', 'Abfall', 'Verbrauchsgüter', 'Geschäftsreisen', 'Arbeitsweg'],
        legend: {
            position: legendPosition
        },
        colors: colorHexCodes,
        dataLabels: {
            enabled: true
            formatter: function (val: number) {
                return val.toString().replace('.', ',');
            }
        }
    };

    const x = values;

    return (
        <div className={className}>
            <ReactApexChart type="donut" options={options} series={x} height={400} width={350} />
        </div>
    );
};

Upvotes: 1

Views: 1287

Answers (1)

Patryk Laszuk
Patryk Laszuk

Reputation: 1440

In dataLabels use this formatter:

formatter: function (val) {
  let roundVal = Math.round(val*10)/10
  return roundVal.toString().replace('.', ',')+'%';
},

And in tooltip y use this (https://apexcharts.com/docs/options/tooltip/#yformatter):

formatter: function (val){
  return val.toString().replace('.', ',')
},

Upvotes: 1

Related Questions