Localization in Vue Chart component

3 Feb 20267 minutes to read

The localization library localizes the Chart’s default text content. Static text used by chart features (for example, zoom toolbar labels) can be translated by providing a locale value and a translation object.

Locale keys	Text to display
Zoom	Zoom
ZoomIn	ZoomIn
ZoomOut	ZoomOut
Reset	Reset
Pan	Pan
ResetZoom	Reset Zoom

To load translations in an application, load function of L10n class.

For more information about localization, see the localization guide:
localization

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :locale='locale' :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Area' xName='x' yName='y' name='Product X'> </e-series>
                <e-series :dataSource='seriesData' type='Area' xName='x' yName='y1' name='Product Y'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, Category, Zoom } from "@syncfusion/ej2-vue-charts";
import { L10n } from '@syncfusion/ej2-base';



L10n.load({
    'ar-AR': {
        'chart': {
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Zoom: 'زوم',
            Pan: 'مقلاة',
            Reset: 'إعادة تعيين',
        },
    }
});

const seriesData = [
    { x: 1900, y: 4, y1: 2.6, y2: 2.8 }, { x: 1920, y: 3.0, y1: 2.8, y2: 2.5 },
    { x: 1940, y: 3.8, y1: 2.6, y2: 2.8 }, { x: 1960, y: 3.4, y1: 3, y2: 3.2 },
    { x: 1980, y: 3.2, y1: 3.6, y2: 2.9 }, { x: 2000, y: 3.9, y1: 3, y2: 2 }
];
const primaryXAxis = {
    title: 'Year',
    edgeLabelPlacement: 'Shift'
};
const zoom = {
    enableMouseWheelZooming: true,
    enableDeferredZooming: true,
    enablePinchZooming: true,
    enableSelectionZooming: true
};
const title = "Average Sales Comparison";
const locale = "ar-AR";

provide('chart', [AreaSeries, Category, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart id="container" :locale='locale' :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Area' xName='x' yName='y' name='Product X'> </e-series>
        <e-series :dataSource='seriesData' type='Area' xName='x' yName='y1' name='Product Y'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, Category, Zoom } from "@syncfusion/ej2-vue-charts";
import { L10n } from '@syncfusion/ej2-base';



L10n.load({
  'ar-AR': {
    'chart': {
      ZoomIn: 'تكبير',
      ZoomOut: 'تصغير',
      Zoom: 'زوم',
      Pan: 'مقلاة',
      Reset: 'إعادة تعيين',
    },
  }
});
export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 1900, y: 4, y1: 2.6, y2: 2.8 }, { x: 1920, y: 3.0, y1: 2.8, y2: 2.5 },
        { x: 1940, y: 3.8, y1: 2.6, y2: 2.8 }, { x: 1960, y: 3.4, y1: 3, y2: 3.2 },
        { x: 1980, y: 3.2, y1: 3.6, y2: 2.9 }, { x: 2000, y: 3.9, y1: 3, y2: 2 }
      ],
      primaryXAxis: {
        title: 'Year',
        edgeLabelPlacement: 'Shift'
      },
      zoom: {
        enableMouseWheelZooming: true,
        enableDeferredZooming: true,
        enablePinchZooming: true,
        enableSelectionZooming: true
      },
      title: "Average Sales Comparison",
      locale: "ar-AR"
    };
  },
  provide: {
    chart: [AreaSeries, Category, Zoom]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>