Localization in Vue Chart component

13 Jun 20247 minutes to read

Localization library allows to localize the default text content of Chart. In Chart component,
it has the static text on some features(like zooming toolbars)
and this can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.

Locale key words Text to display
Zoom Zoom
ZoomIn ZoomIn
ZoomOut ZoomOut
Reset Reset
Pan Pan
ResetZoom Reset Zoom

To load translation object in an application use load function of L10n class.

For more information about localization, refer this
localization

<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>
<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>