Skip to content

Commit a913935

Browse files
haneetsinghHaneet Singh
haneetsingh
and
Haneet Singh
authored
added guide for Victory chart localization in docs (#3041)
Co-authored-by: Haneet Singh <haneet.singh@everstream.ai>
1 parent d9d9ca2 commit a913935

File tree

1 file changed

+202
-0
lines changed

1 file changed

+202
-0
lines changed

‎website/docs/guides/localization.mdx

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Localization
3+
---
4+
5+
Victory provides extensive support for localization, allowing you to customize your data visualizations to match local conventions for dates, numbers, and text direction. This ensures that your charts are easily understandable and culturally appropriate for users around the world.
6+
7+
## Date and Number Formatting
8+
9+
Different regions have varying conventions for displaying dates, numbers, and currencies. Victory components can be customized to respect these local preferences. The example below demonstrates French formatting conventions for dates (e.g., "1 janvier 2023") and currency values (e.g., "1 234,56 €").
10+
11+
```jsx live noInline
12+
const numbersData = [
13+
{ x: new Date(2023, 0, 1), y: 1500 },
14+
{ x: new Date(2023, 2, 15), y: 2800 },
15+
{ x: new Date(2023, 5, 1), y: 2200 },
16+
{ x: new Date(2023, 8, 20), y: 3100 },
17+
{ x: new Date(2023, 11, 31), y: 4000 }
18+
];
19+
20+
const dateFormatter = new Intl.DateTimeFormat("fr-FR", {
21+
year: "numeric",
22+
month: "long",
23+
day: "numeric",
24+
});
25+
26+
const numberFormatter = new Intl.NumberFormat("fr-FR", {
27+
style: "currency",
28+
currency: "EUR"
29+
});
30+
31+
function App() {
32+
return (
33+
<VictoryChart
34+
padding={{ top: 50, bottom: 80, left: 80, right: 50 }}
35+
scale={{ x: "time" }}
36+
domainPadding={{ x: 10, y: 10 }}
37+
>
38+
<VictoryAxis
39+
tickFormat={(t) => dateFormatter.format(t)}
40+
style={{
41+
tickLabels: {
42+
fontSize: 10,
43+
padding: 15,
44+
angle: -45,
45+
textAnchor: "end"
46+
},
47+
}}
48+
/>
49+
<VictoryAxis
50+
dependentAxis
51+
tickFormat={(t) => numberFormatter.format(t)}
52+
style={{
53+
tickLabels: { fontSize: 10, padding: 10 },
54+
}}
55+
/>
56+
<VictoryLine
57+
data={numbersData}
58+
style={{
59+
data: { stroke: "#c43a31", strokeWidth: 2 }
60+
}}
61+
/>
62+
</VictoryChart>
63+
);
64+
}
65+
66+
render(<App />);
67+
```
68+
## Text Direction (LTR/RTL)
69+
70+
Victory supports right-to-left (RTL) layouts for languages like Arabic, Hebrew, and Persian. The following example demonstrates an Arabic sales dashboard with RTL text direction and proper Arabic number formatting.
71+
72+
```jsx live noInline
73+
const rtlData = [
74+
{ x: "المبيعات الشهرية", y: 120 },
75+
{ x: "إجمالي الإيرادات", y: 250 },
76+
{ x: "عدد العملاء", y: 180 },
77+
{ x: "المنتجات النشطة", y: 90 }
78+
];
79+
80+
function App() {
81+
return (
82+
<VictoryChart
83+
dir="rtl"
84+
domainPadding={20}
85+
padding={{ top: 20, bottom: 30, left: 50, right: 50 }}
86+
>
87+
<VictoryBar
88+
data={rtlData}
89+
labels={({ datum }) => `${datum.y}`}
90+
style={{
91+
data: { fill: "#c43a31" }
92+
}}
93+
labelComponent={
94+
<VictoryLabel
95+
textAnchor="end"
96+
style={{
97+
direction: "rtl",
98+
fontSize: 12,
99+
fill: "#252525",
100+
}}
101+
/>
102+
}
103+
/>
104+
</VictoryChart>
105+
);
106+
}
107+
108+
render(<App />);
109+
```
110+
111+
## Custom Formatting for Labels and Tooltips
112+
113+
Labels and tooltips often require specialized formatting to match local conventions. This example demonstrates a sales data visualization with Brazilian Portuguese formatting for dates and currency values, including interactive tooltips.
114+
115+
```jsx live noInline
116+
const salesData = [
117+
{ x: new Date(2023, 0, 1), y: 25000 },
118+
{ x: new Date(2023, 1, 1), y: 28000 },
119+
{ x: new Date(2023, 2, 1), y: 32000 },
120+
{ x: new Date(2023, 3, 1), y: 30000 },
121+
{ x: new Date(2023, 4, 1), y: 35000 },
122+
{ x: new Date(2023, 5, 1), y: 42000 },
123+
{ x: new Date(2023, 6, 1), y: 38000 },
124+
{ x: new Date(2023, 7, 1), y: 45000 },
125+
{ x: new Date(2023, 8, 1), y: 47000 },
126+
{ x: new Date(2023, 9, 1), y: 52000 },
127+
{ x: new Date(2023, 10, 1), y: 58000 },
128+
{ x: new Date(2023, 11, 1), y: 65000 }
129+
];
130+
131+
const dateFormatter = new Intl.DateTimeFormat("pt-BR", {
132+
month: "long",
133+
year: "numeric"
134+
});
135+
136+
const currencyFormatter = new Intl.NumberFormat("pt-BR", {
137+
style: "currency",
138+
currency: "BRL"
139+
});
140+
141+
const formatTooltip = ({ datum }) => {
142+
const date = new Intl.DateTimeFormat("pt-BR", {
143+
day: "2-digit",
144+
month: "2-digit",
145+
year: "numeric"
146+
}).format(datum.x);
147+
148+
return `
149+
Data: ${date}
150+
Valor: ${currencyFormatter.format(datum.y)}
151+
`;
152+
};
153+
154+
function App() {
155+
return (
156+
<VictoryChart
157+
padding={{ top: 50, bottom: 50, left: 80, right: 50 }}
158+
scale={{ x: "time" }}
159+
>
160+
<VictoryAxis
161+
tickFormat={(t) => dateFormatter.format(t)}
162+
style={{
163+
tickLabels: { fontSize: 10, padding: 5 }
164+
}}
165+
/>
166+
<VictoryAxis
167+
dependentAxis
168+
tickFormat={(t) => currencyFormatter.format(t)}
169+
style={{
170+
tickLabels: { fontSize: 10, padding: 5 }
171+
}}
172+
/>
173+
<VictoryLine
174+
data={salesData}
175+
style={{
176+
data: { stroke: "#2196F3", strokeWidth: 2 }
177+
}}
178+
/>
179+
<VictoryScatter
180+
data={salesData}
181+
size={4}
182+
style={{
183+
data: { fill: "#2196F3" }
184+
}}
185+
labels={formatTooltip}
186+
labelComponent={
187+
<VictoryTooltip
188+
cornerRadius={5}
189+
flyoutStyle={{
190+
fill: "white",
191+
stroke: "#d4d4d4",
192+
strokeWidth: 1,
193+
}}
194+
/>
195+
}
196+
/>
197+
</VictoryChart>
198+
);
199+
}
200+
201+
render(<App />);
202+
```

0 commit comments

Comments
 (0)