Can not apply Internationalization

[Sandro]

Hello,

I'm trying to apply Internationalization to a Chart component in Vue to achieve in Y Axis the "R$ 1.000,00" format (Brazilian Currency format).

I have followed all the documentation and examples, with no luck.

Also, I have applied like the examples with "EUR" currency or "de-DE" culture, and it seems to have no effect at all.

Can you please check what am I doing wrong here?

Regards

<template>

<ejs-chart

class="chart-container"

:primaryXAxis="primaryXAxis"

:primaryYAxis="primaryYAxis"

:margin="margin"

:legendSettings="legendSettings"

:palettes="palettes"

:chartArea="chartArea"

:tooltip="tooltip"

:useGroupingSeparator="true"

>

<e-series-collection>

<e-series

v-for="serie in series"

:dataSource="serie.data"

:name="serie.name"

:key="serie.name"

legendShape="Circle"

type="StackingColumn"

xName="x"

yName="y"

></e-series>

</e-series-collection>

</ejs-chart>

</template>

<script>

import Vue from "vue";

import {

ChartPlugin,

StackingColumnSeries,

DateTime,

Legend,

Tooltip

} from "@syncfusion/ej2-vue-charts";

import {

loadCldr,

L10n,

setCulture,

setCurrencyCode

} from "@syncfusion/ej2-base";

import * as settings from "@/components/Chart/settings";

import * as numberingSystems from "../../../node_modules/cldr-data/supplemental/numberingSystems.json";

import * as gregorian from "../../../node_modules/cldr-data/main/pt/ca-gregorian.json";

import * as numbers from "../../../node_modules/cldr-data/main/pt/numbers.json";

import * as timeZoneNames from "../../../node_modules/cldr-data/main/pt/timeZoneNames.json";

Vue.use(ChartPlugin);

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames);

setCulture("pt");

setCurrencyCode("BRL");

export default {

props: ["series"],

data() {

return {

primaryXAxis: settings.datetimePrimaryXAxis,

primaryYAxis: {

          rangePadding: "Normal",

         minimum: 0,

         lineStyle: { width: 0 },

         majorGridLines: { width: 1, color: "#ece9f1" },

         majorTickLines: { width: 0 },

         minorTickLines: { width: 0 },

         labelStyle: {

            fontFamily: "Open Sans",

            fontSize: 8,

            color: "#b3aab9",

         },

         labelFormat: "c",

      },

margin: settings.defaultMargin,

chartArea: settings.defaultChartArea,

legendSettings: settings.defaultLegendSettings,

tooltip: settings.defaultTooltip,

palettes: settings.defaultPalettes

};

},

provide: {

chart: [StackingColumnSeries, DateTime, Legend, Tooltip]

}

};

</script>

<style scoped>

.chart-container {

height: 250px;

}

</style>

[Srihari Muthukaruppan]

Hi Sandro, 

  

We have analyzed your query. From that, we suggest you to include the mentioned files in your project and set labelFormat property as c2 to achieve your requirement. Based on your requirement we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot below. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/internationalization678418786.zip 

  

Code Snippet:  

import Vue from "vue"; 

import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base'; 

import * as currencies from './currencies.json'; 

import * as cagregorian from './ca-gregorian.json'; 

import * as numbers from './numbers.json'; 

import * as timeZoneNames from './timeZoneNames.json'; 

import * as numberingSystem from './numberingSystems.json'; 

import { Browser } from '@syncfusion/ej2-base'; 

import { ChartPlugin, StackingColumnSeries, Legend, Category, Tooltip} from "@syncfusion/ej2-vue-charts"; 

Vue.use(ChartPlugin); 

loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystem); 

  

setCulture('pt'); 

setCurrencyCode('BRL');

// add your additional codes here

​primaryYAxis: 

        { 

            title: 'Sales', 

            lineStyle: { width: 0 }, 

            minimum: 0, 

            maximum: 500, 

            interval: 100, 

            majorTickLines: { width: 0 }, 

            majorGridLines: { width: 1 }, 

            minorGridLines: { width: 1 }, 

            minorTickLines: { width: 0 }, 

            labelFormat: 'c2', 

        }, 

  

Screenshot: 

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M