We are facing issue while implementing "€" symbol for currency, for "$" it works fine. Code snippet: Working fine with below code:

import { D3BarChart } from 'vue-d3-charts';

export default {
    name: "D3Chart",
    components: {
        D3BarChart,
    },
    props: {
      aemdata: {
        type: Object,
        required: true,
      },
      billingdata: {
        type: Object,
        required: true,
      },
    },
     data() {

    return {
      topUpColor : '#D3D3D3',
      deductionColor : '#696969',
      
      chart_config: {
        key: 'monthYear',
        values: ['topUp', 'deduction'],
        axis: { 
          yTicks: 10,
          yFormat: '$',
        },
        color: {
          keys: {
            'topUp': '#D3D3D3',
            'deduction': '#696969',
          },
        },
      },
    };
  },
}

Working screenshot:

But when we are using below code:

import { D3BarChart } from 'vue-d3-charts';

export default {
    name: "D3Chart",
    components: {
        D3BarChart,
    },
    props: {
      aemdata: {
        type: Object,
        required: true,
      },
      billingdata: {
        type: Object,
        required: true,
      },
    },
     data() {

    return {
      topUpColor : '#D3D3D3',
      deductionColor : '#696969',
      
      chart_config: {
        key: 'monthYear',
        values: ['topUp', 'deduction'],
        axis: { 
          yTicks: 10,
          yFormat: '€',
        },
        color: {
          keys: {
            'topUp': '#D3D3D3',
            'deduction': '#696969',
          },
        },
      },
    };
  },
}

It is throwing Below error

"An error occurred while showing the error page Unfortunately an error occurred and while showing the error page another error occurred

Error details: TypeError: this.chart.destroyChart is not a function

Go back to home"