@mui/x-charts 7.0.0-beta.4 → 7.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/BarChart/BarChart.js +12 -0
  2. package/CHANGELOG.md +271 -61
  3. package/ChartContainer/ChartContainer.js +4 -0
  4. package/ChartsAxis/ChartsAxis.js +8 -0
  5. package/ChartsGrid/ChartsGrid.js +2 -2
  6. package/ChartsLegend/DefaultChartsLegend.js +20 -27
  7. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +3 -1
  8. package/ChartsXAxis/ChartsXAxis.js +18 -2
  9. package/ChartsYAxis/ChartsYAxis.js +18 -2
  10. package/LineChart/LineChart.js +12 -0
  11. package/PieChart/PieChart.js +29 -8
  12. package/ResponsiveChartContainer/ResponsiveChartContainer.js +4 -0
  13. package/ScatterChart/ScatterChart.js +12 -0
  14. package/SparkLineChart/SparkLineChart.js +2 -0
  15. package/esm/BarChart/BarChart.js +12 -0
  16. package/esm/ChartContainer/ChartContainer.js +4 -0
  17. package/esm/ChartsAxis/ChartsAxis.js +8 -0
  18. package/esm/ChartsGrid/ChartsGrid.js +2 -2
  19. package/esm/ChartsLegend/DefaultChartsLegend.js +20 -27
  20. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +3 -1
  21. package/esm/ChartsXAxis/ChartsXAxis.js +18 -2
  22. package/esm/ChartsYAxis/ChartsYAxis.js +18 -2
  23. package/esm/LineChart/LineChart.js +12 -0
  24. package/esm/PieChart/PieChart.js +29 -8
  25. package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js +4 -0
  26. package/esm/ScatterChart/ScatterChart.js +12 -0
  27. package/esm/SparkLineChart/SparkLineChart.js +2 -0
  28. package/esm/hooks/useTicks.js +23 -9
  29. package/esm/internals/useIsRTL.js +5 -0
  30. package/hooks/useTicks.d.ts +15 -3
  31. package/hooks/useTicks.js +23 -9
  32. package/index.js +1 -1
  33. package/internals/useIsRTL.d.ts +1 -0
  34. package/internals/useIsRTL.js +12 -0
  35. package/models/axis.d.ts +11 -2
  36. package/modern/BarChart/BarChart.js +12 -0
  37. package/modern/ChartContainer/ChartContainer.js +4 -0
  38. package/modern/ChartsAxis/ChartsAxis.js +8 -0
  39. package/modern/ChartsGrid/ChartsGrid.js +2 -2
  40. package/modern/ChartsLegend/DefaultChartsLegend.js +20 -27
  41. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +3 -1
  42. package/modern/ChartsXAxis/ChartsXAxis.js +18 -2
  43. package/modern/ChartsYAxis/ChartsYAxis.js +18 -2
  44. package/modern/LineChart/LineChart.js +12 -0
  45. package/modern/PieChart/PieChart.js +29 -8
  46. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +4 -0
  47. package/modern/ScatterChart/ScatterChart.js +12 -0
  48. package/modern/SparkLineChart/SparkLineChart.js +2 -0
  49. package/modern/hooks/useTicks.js +23 -9
  50. package/modern/index.js +1 -1
  51. package/modern/internals/useIsRTL.js +5 -0
  52. package/package.json +2 -2
@@ -154,10 +154,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
154
154
  tickFontSize: _propTypes.default.number,
155
155
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
156
156
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
157
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
157
158
  tickLabelStyle: _propTypes.default.object,
158
159
  tickMaxStep: _propTypes.default.number,
159
160
  tickMinStep: _propTypes.default.number,
160
161
  tickNumber: _propTypes.default.number,
162
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
161
163
  tickSize: _propTypes.default.number,
162
164
  valueFormatter: _propTypes.default.func
163
165
  })),
@@ -189,10 +191,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
189
191
  tickFontSize: _propTypes.default.number,
190
192
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
191
193
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
194
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
192
195
  tickLabelStyle: _propTypes.default.object,
193
196
  tickMaxStep: _propTypes.default.number,
194
197
  tickMinStep: _propTypes.default.number,
195
198
  tickNumber: _propTypes.default.number,
199
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
196
200
  tickSize: _propTypes.default.number,
197
201
  valueFormatter: _propTypes.default.func
198
202
  }))
@@ -123,10 +123,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
123
123
  tickFontSize: _propTypes.default.number,
124
124
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
125
125
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
126
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
126
127
  tickLabelStyle: _propTypes.default.object,
127
128
  tickMaxStep: _propTypes.default.number,
128
129
  tickMinStep: _propTypes.default.number,
129
130
  tickNumber: _propTypes.default.number,
131
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
130
132
  tickSize: _propTypes.default.number
131
133
  }), _propTypes.default.string]),
132
134
  /**
@@ -150,10 +152,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
150
152
  tickFontSize: _propTypes.default.number,
151
153
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
152
154
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
155
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
153
156
  tickLabelStyle: _propTypes.default.object,
154
157
  tickMaxStep: _propTypes.default.number,
155
158
  tickMinStep: _propTypes.default.number,
156
159
  tickNumber: _propTypes.default.number,
160
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
157
161
  tickSize: _propTypes.default.number
158
162
  }), _propTypes.default.string]),
159
163
  /**
@@ -177,10 +181,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
177
181
  tickFontSize: _propTypes.default.number,
178
182
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
179
183
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
184
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
180
185
  tickLabelStyle: _propTypes.default.object,
181
186
  tickMaxStep: _propTypes.default.number,
182
187
  tickMinStep: _propTypes.default.number,
183
188
  tickNumber: _propTypes.default.number,
189
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
184
190
  tickSize: _propTypes.default.number
185
191
  }), _propTypes.default.string]),
186
192
  /**
@@ -214,10 +220,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
214
220
  tickFontSize: _propTypes.default.number,
215
221
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
216
222
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
223
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
217
224
  tickLabelStyle: _propTypes.default.object,
218
225
  tickMaxStep: _propTypes.default.number,
219
226
  tickMinStep: _propTypes.default.number,
220
227
  tickNumber: _propTypes.default.number,
228
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
221
229
  tickSize: _propTypes.default.number
222
230
  }), _propTypes.default.string])
223
231
  } : void 0;
@@ -96,7 +96,7 @@ function ChartsGrid(props) {
96
96
  x1: offset,
97
97
  x2: offset,
98
98
  className: classes.verticalLine
99
- }, formattedValue)), horizontal && yTicks.map(({
99
+ }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
100
100
  formattedValue,
101
101
  offset
102
102
  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
@@ -105,7 +105,7 @@ function ChartsGrid(props) {
105
105
  x1: xScale.range()[0],
106
106
  x2: xScale.range()[1],
107
107
  className: classes.horizontalLine
108
- }, formattedValue))]
108
+ }, `horizontal-${formattedValue}`))]
109
109
  }));
110
110
  }
111
111
  process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {
@@ -59,6 +59,7 @@ function DefaultChartsLegend(props) {
59
59
  labelStyle: inLabelStyle
60
60
  } = props;
61
61
  const theme = (0, _styles.useTheme)();
62
+ const isRTL = theme.direction === 'rtl';
62
63
  const labelStyle = React.useMemo(() => (0, _extends2.default)({}, theme.typography.subtitle1, {
63
64
  color: 'inherit',
64
65
  dominantBaseline: 'central',
@@ -89,7 +90,7 @@ function DefaultChartsLegend(props) {
89
90
  const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
90
91
  const availableWidth = totalWidth - padding.left - padding.right;
91
92
  const availableHeight = totalHeight - padding.top - padding.bottom;
92
- const seriesWithPosition = React.useMemo(() => {
93
+ const [seriesWithPosition, legendWidth, legendHeight] = React.useMemo(() => {
93
94
  // Start at 0, 0. Will be modified later by padding and position.
94
95
  let x = 0;
95
96
  let y = 0;
@@ -153,40 +154,31 @@ function DefaultChartsLegend(props) {
153
154
  }
154
155
  return rep;
155
156
  });
156
-
157
- // Move the legend according to padding and position
158
- let gapX = 0;
159
- let gapY = 0;
157
+ return [seriesWithRawPosition.map(item => (0, _extends2.default)({}, item, {
158
+ positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
159
+ : item.outerHeight / 2) // Get the center of the item
160
+ })), totalWidthUsed, totalHeightUsed];
161
+ }, [seriesToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap]);
162
+ const gapX = React.useMemo(() => {
160
163
  switch (position.horizontal) {
161
164
  case 'left':
162
- gapX = padding.left;
163
- break;
165
+ return padding.left;
164
166
  case 'right':
165
- gapX = totalWidth - padding.right - totalWidthUsed;
166
- break;
167
+ return totalWidth - padding.right - legendWidth;
167
168
  default:
168
- gapX = (totalWidth - totalWidthUsed) / 2;
169
- break;
169
+ return (totalWidth - legendWidth) / 2;
170
170
  }
171
+ }, [position.horizontal, padding.left, padding.right, totalWidth, legendWidth]);
172
+ const gapY = React.useMemo(() => {
171
173
  switch (position.vertical) {
172
174
  case 'top':
173
- gapY = padding.top;
174
- break;
175
+ return padding.top;
175
176
  case 'bottom':
176
- gapY = totalHeight - padding.bottom - totalHeightUsed;
177
- break;
177
+ return totalHeight - padding.bottom - legendHeight;
178
178
  default:
179
- gapY = (totalHeight - totalHeightUsed) / 2;
180
- break;
179
+ return (totalHeight - legendHeight) / 2;
181
180
  }
182
- return seriesWithRawPosition.map(item => (0, _extends2.default)({}, item, {
183
- // Add the gap due to the position
184
- positionX: item.positionX + gapX,
185
- // Add the gap due to the position
186
- positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
187
- : item.outerHeight / 2) // Get the center of the item
188
- }));
189
- }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
181
+ }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
190
182
  if (hidden) {
191
183
  return null;
192
184
  }
@@ -201,9 +193,10 @@ function DefaultChartsLegend(props) {
201
193
  positionY
202
194
  }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
203
195
  className: classes.series,
204
- transform: `translate(${positionX} ${positionY})`,
196
+ transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
205
197
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
206
198
  className: classes.mark,
199
+ x: isRTL ? -itemMarkWidth : 0,
207
200
  y: -itemMarkHeight / 2,
208
201
  width: itemMarkWidth,
209
202
  height: itemMarkHeight,
@@ -211,7 +204,7 @@ function DefaultChartsLegend(props) {
211
204
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
212
205
  style: labelStyle,
213
206
  text: label,
214
- x: itemMarkWidth + markGap,
207
+ x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
215
208
  y: 0
216
209
  })]
217
210
  }, id))
@@ -37,7 +37,9 @@ function DefaultChartsAxisTooltipContent(props) {
37
37
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
38
38
  colSpan: 3,
39
39
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
40
- children: axisFormatter(axisValue)
40
+ children: axisFormatter(axisValue, {
41
+ location: 'tooltip'
42
+ })
41
43
  })
42
44
  })
43
45
  })
@@ -148,7 +148,9 @@ function ChartsXAxis(inProps) {
148
148
  slots,
149
149
  slotProps,
150
150
  tickInterval,
151
- tickLabelInterval
151
+ tickLabelInterval,
152
+ tickPlacement,
153
+ tickLabelPlacement
152
154
  } = defaultizedProps;
153
155
  const theme = (0, _styles.useTheme)();
154
156
  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -184,7 +186,9 @@ function ChartsXAxis(inProps) {
184
186
  scale: xScale,
185
187
  tickNumber,
186
188
  valueFormatter,
187
- tickInterval
189
+ tickInterval,
190
+ tickPlacement,
191
+ tickLabelPlacement
188
192
  });
189
193
  const xTicksWithDimension = addLabelDimension(xTicks, {
190
194
  tickLabelStyle: axisTickLabelProps.style,
@@ -327,6 +331,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
327
331
  * @default 'auto'
328
332
  */
329
333
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
334
+ /**
335
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
336
+ * Only used if scale is 'band'.
337
+ * @default 'middle'
338
+ */
339
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
330
340
  /**
331
341
  * The style applied to ticks text.
332
342
  */
@@ -348,6 +358,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
348
358
  * Not supported by categorical axis (band, points).
349
359
  */
350
360
  tickNumber: _propTypes.default.number,
361
+ /**
362
+ * The placement of ticks in regard to the band interval.
363
+ * Only used if scale is 'band'.
364
+ * @default 'extremities'
365
+ */
366
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
351
367
  /**
352
368
  * The size of the ticks.
353
369
  * @default 6
@@ -87,7 +87,9 @@ function ChartsYAxis(inProps) {
87
87
  tickSize: tickSizeProp,
88
88
  valueFormatter,
89
89
  slots,
90
- slotProps
90
+ slotProps,
91
+ tickPlacement,
92
+ tickLabelPlacement
91
93
  } = defaultizedProps;
92
94
  const theme = (0, _styles.useTheme)();
93
95
  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -103,7 +105,9 @@ function ChartsYAxis(inProps) {
103
105
  const yTicks = (0, _useTicks.useTicks)({
104
106
  scale: yScale,
105
107
  tickNumber,
106
- valueFormatter
108
+ valueFormatter,
109
+ tickPlacement,
110
+ tickLabelPlacement
107
111
  });
108
112
  const positionSign = position === 'right' ? 1 : -1;
109
113
  const labelRefPoint = {
@@ -257,6 +261,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
257
261
  * @default 'auto'
258
262
  */
259
263
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
264
+ /**
265
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
266
+ * Only used if scale is 'band'.
267
+ * @default 'middle'
268
+ */
269
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
260
270
  /**
261
271
  * The style applied to ticks text.
262
272
  */
@@ -278,6 +288,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
278
288
  * Not supported by categorical axis (band, points).
279
289
  */
280
290
  tickNumber: _propTypes.default.number,
291
+ /**
292
+ * The placement of ticks in regard to the band interval.
293
+ * Only used if scale is 'band'.
294
+ * @default 'extremities'
295
+ */
296
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
281
297
  /**
282
298
  * The size of the ticks.
283
299
  * @default 6
@@ -168,10 +168,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
168
168
  tickFontSize: _propTypes.default.number,
169
169
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
170
170
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
171
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
171
172
  tickLabelStyle: _propTypes.default.object,
172
173
  tickMaxStep: _propTypes.default.number,
173
174
  tickMinStep: _propTypes.default.number,
174
175
  tickNumber: _propTypes.default.number,
176
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
175
177
  tickSize: _propTypes.default.number
176
178
  }), _propTypes.default.string]),
177
179
  children: _propTypes.default.node,
@@ -228,10 +230,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
228
230
  tickFontSize: _propTypes.default.number,
229
231
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
230
232
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
233
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
231
234
  tickLabelStyle: _propTypes.default.object,
232
235
  tickMaxStep: _propTypes.default.number,
233
236
  tickMinStep: _propTypes.default.number,
234
237
  tickNumber: _propTypes.default.number,
238
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
235
239
  tickSize: _propTypes.default.number
236
240
  }), _propTypes.default.string]),
237
241
  /**
@@ -300,10 +304,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
300
304
  tickFontSize: _propTypes.default.number,
301
305
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
302
306
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
307
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
303
308
  tickLabelStyle: _propTypes.default.object,
304
309
  tickMaxStep: _propTypes.default.number,
305
310
  tickMinStep: _propTypes.default.number,
306
311
  tickNumber: _propTypes.default.number,
312
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
307
313
  tickSize: _propTypes.default.number
308
314
  }), _propTypes.default.string]),
309
315
  /**
@@ -361,10 +367,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
361
367
  tickFontSize: _propTypes.default.number,
362
368
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
363
369
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
370
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
364
371
  tickLabelStyle: _propTypes.default.object,
365
372
  tickMaxStep: _propTypes.default.number,
366
373
  tickMinStep: _propTypes.default.number,
367
374
  tickNumber: _propTypes.default.number,
375
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
368
376
  tickSize: _propTypes.default.number
369
377
  }), _propTypes.default.string]),
370
378
  viewBox: _propTypes.default.shape({
@@ -405,10 +413,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
405
413
  tickFontSize: _propTypes.default.number,
406
414
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
407
415
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
416
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
408
417
  tickLabelStyle: _propTypes.default.object,
409
418
  tickMaxStep: _propTypes.default.number,
410
419
  tickMinStep: _propTypes.default.number,
411
420
  tickNumber: _propTypes.default.number,
421
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
412
422
  tickSize: _propTypes.default.number,
413
423
  valueFormatter: _propTypes.default.func
414
424
  })),
@@ -440,10 +450,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
440
450
  tickFontSize: _propTypes.default.number,
441
451
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
442
452
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
453
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
443
454
  tickLabelStyle: _propTypes.default.object,
444
455
  tickMaxStep: _propTypes.default.number,
445
456
  tickMinStep: _propTypes.default.number,
446
457
  tickNumber: _propTypes.default.number,
458
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
447
459
  tickSize: _propTypes.default.number,
448
460
  valueFormatter: _propTypes.default.func
449
461
  }))
@@ -15,6 +15,7 @@ var _ChartsTooltip = require("../ChartsTooltip");
15
15
  var _ChartsLegend = require("../ChartsLegend");
16
16
  var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
17
17
  var _PiePlot = require("./PiePlot");
18
+ var _useIsRTL = require("../internals/useIsRTL");
18
19
  var _jsxRuntime = require("react/jsx-runtime");
19
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
20
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -24,6 +25,12 @@ const defaultMargin = {
24
25
  left: 5,
25
26
  right: 100
26
27
  };
28
+ const defaultRTLMargin = {
29
+ top: 5,
30
+ bottom: 5,
31
+ left: 100,
32
+ right: 5
33
+ };
27
34
 
28
35
  /**
29
36
  * Demos:
@@ -53,13 +60,7 @@ function PieChart(props) {
53
60
  y: 'none'
54
61
  },
55
62
  skipAnimation,
56
- legend = {
57
- direction: 'column',
58
- position: {
59
- vertical: 'middle',
60
- horizontal: 'right'
61
- }
62
- },
63
+ legend: legendProps,
63
64
  topAxis = null,
64
65
  leftAxis = null,
65
66
  rightAxis = null,
@@ -69,7 +70,15 @@ function PieChart(props) {
69
70
  slotProps,
70
71
  onItemClick
71
72
  } = props;
72
- const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
73
+ const isRTL = (0, _useIsRTL.useIsRTL)();
74
+ const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
75
+ const legend = (0, _extends2.default)({
76
+ direction: 'column',
77
+ position: {
78
+ vertical: 'middle',
79
+ horizontal: isRTL ? 'left' : 'right'
80
+ }
81
+ }, legendProps);
73
82
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
74
83
  series: series.map(s => (0, _extends2.default)({
75
84
  type: 'pie'
@@ -139,10 +148,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
139
148
  tickFontSize: _propTypes.default.number,
140
149
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
141
150
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
151
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
142
152
  tickLabelStyle: _propTypes.default.object,
143
153
  tickMaxStep: _propTypes.default.number,
144
154
  tickMinStep: _propTypes.default.number,
145
155
  tickNumber: _propTypes.default.number,
156
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
146
157
  tickSize: _propTypes.default.number
147
158
  }), _propTypes.default.string]),
148
159
  children: _propTypes.default.node,
@@ -188,10 +199,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
188
199
  tickFontSize: _propTypes.default.number,
189
200
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
190
201
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
202
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
191
203
  tickLabelStyle: _propTypes.default.object,
192
204
  tickMaxStep: _propTypes.default.number,
193
205
  tickMinStep: _propTypes.default.number,
194
206
  tickNumber: _propTypes.default.number,
207
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
195
208
  tickSize: _propTypes.default.number
196
209
  }), _propTypes.default.string]),
197
210
  /**
@@ -247,10 +260,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
247
260
  tickFontSize: _propTypes.default.number,
248
261
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
249
262
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
263
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
250
264
  tickLabelStyle: _propTypes.default.object,
251
265
  tickMaxStep: _propTypes.default.number,
252
266
  tickMinStep: _propTypes.default.number,
253
267
  tickNumber: _propTypes.default.number,
268
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
254
269
  tickSize: _propTypes.default.number
255
270
  }), _propTypes.default.string]),
256
271
  /**
@@ -308,10 +323,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
308
323
  tickFontSize: _propTypes.default.number,
309
324
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
310
325
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
326
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
311
327
  tickLabelStyle: _propTypes.default.object,
312
328
  tickMaxStep: _propTypes.default.number,
313
329
  tickMinStep: _propTypes.default.number,
314
330
  tickNumber: _propTypes.default.number,
331
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
315
332
  tickSize: _propTypes.default.number
316
333
  }), _propTypes.default.string]),
317
334
  viewBox: _propTypes.default.shape({
@@ -352,10 +369,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
352
369
  tickFontSize: _propTypes.default.number,
353
370
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
354
371
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
372
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
355
373
  tickLabelStyle: _propTypes.default.object,
356
374
  tickMaxStep: _propTypes.default.number,
357
375
  tickMinStep: _propTypes.default.number,
358
376
  tickNumber: _propTypes.default.number,
377
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
359
378
  tickSize: _propTypes.default.number,
360
379
  valueFormatter: _propTypes.default.func
361
380
  })),
@@ -387,10 +406,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
387
406
  tickFontSize: _propTypes.default.number,
388
407
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
389
408
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
409
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
390
410
  tickLabelStyle: _propTypes.default.object,
391
411
  tickMaxStep: _propTypes.default.number,
392
412
  tickMinStep: _propTypes.default.number,
393
413
  tickNumber: _propTypes.default.number,
414
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
394
415
  tickSize: _propTypes.default.number,
395
416
  valueFormatter: _propTypes.default.func
396
417
  }))
@@ -141,10 +141,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
141
141
  tickFontSize: _propTypes.default.number,
142
142
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
143
143
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
144
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
144
145
  tickLabelStyle: _propTypes.default.object,
145
146
  tickMaxStep: _propTypes.default.number,
146
147
  tickMinStep: _propTypes.default.number,
147
148
  tickNumber: _propTypes.default.number,
149
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
148
150
  tickSize: _propTypes.default.number,
149
151
  valueFormatter: _propTypes.default.func
150
152
  })),
@@ -176,10 +178,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
176
178
  tickFontSize: _propTypes.default.number,
177
179
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
178
180
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
181
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
179
182
  tickLabelStyle: _propTypes.default.object,
180
183
  tickMaxStep: _propTypes.default.number,
181
184
  tickMinStep: _propTypes.default.number,
182
185
  tickNumber: _propTypes.default.number,
186
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
183
187
  tickSize: _propTypes.default.number,
184
188
  valueFormatter: _propTypes.default.func
185
189
  }))
@@ -129,10 +129,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
129
129
  tickFontSize: _propTypes.default.number,
130
130
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
131
131
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
132
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
132
133
  tickLabelStyle: _propTypes.default.object,
133
134
  tickMaxStep: _propTypes.default.number,
134
135
  tickMinStep: _propTypes.default.number,
135
136
  tickNumber: _propTypes.default.number,
137
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
136
138
  tickSize: _propTypes.default.number
137
139
  }), _propTypes.default.string]),
138
140
  children: _propTypes.default.node,
@@ -190,10 +192,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
190
192
  tickFontSize: _propTypes.default.number,
191
193
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
192
194
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
195
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
193
196
  tickLabelStyle: _propTypes.default.object,
194
197
  tickMaxStep: _propTypes.default.number,
195
198
  tickMinStep: _propTypes.default.number,
196
199
  tickNumber: _propTypes.default.number,
200
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
197
201
  tickSize: _propTypes.default.number
198
202
  }), _propTypes.default.string]),
199
203
  /**
@@ -249,10 +253,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
249
253
  tickFontSize: _propTypes.default.number,
250
254
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
251
255
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
256
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
252
257
  tickLabelStyle: _propTypes.default.object,
253
258
  tickMaxStep: _propTypes.default.number,
254
259
  tickMinStep: _propTypes.default.number,
255
260
  tickNumber: _propTypes.default.number,
261
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
256
262
  tickSize: _propTypes.default.number
257
263
  }), _propTypes.default.string]),
258
264
  /**
@@ -305,10 +311,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
305
311
  tickFontSize: _propTypes.default.number,
306
312
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
307
313
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
314
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
308
315
  tickLabelStyle: _propTypes.default.object,
309
316
  tickMaxStep: _propTypes.default.number,
310
317
  tickMinStep: _propTypes.default.number,
311
318
  tickNumber: _propTypes.default.number,
319
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
312
320
  tickSize: _propTypes.default.number
313
321
  }), _propTypes.default.string]),
314
322
  viewBox: _propTypes.default.shape({
@@ -354,10 +362,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
354
362
  tickFontSize: _propTypes.default.number,
355
363
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
356
364
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
365
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
357
366
  tickLabelStyle: _propTypes.default.object,
358
367
  tickMaxStep: _propTypes.default.number,
359
368
  tickMinStep: _propTypes.default.number,
360
369
  tickNumber: _propTypes.default.number,
370
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
361
371
  tickSize: _propTypes.default.number,
362
372
  valueFormatter: _propTypes.default.func
363
373
  })),
@@ -389,10 +399,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
389
399
  tickFontSize: _propTypes.default.number,
390
400
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
391
401
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
402
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
392
403
  tickLabelStyle: _propTypes.default.object,
393
404
  tickMaxStep: _propTypes.default.number,
394
405
  tickMinStep: _propTypes.default.number,
395
406
  tickNumber: _propTypes.default.number,
407
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
396
408
  tickSize: _propTypes.default.number,
397
409
  valueFormatter: _propTypes.default.func
398
410
  }))
@@ -255,10 +255,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
255
255
  tickFontSize: _propTypes.default.number,
256
256
  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
257
257
  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
258
+ tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
258
259
  tickLabelStyle: _propTypes.default.object,
259
260
  tickMaxStep: _propTypes.default.number,
260
261
  tickMinStep: _propTypes.default.number,
261
262
  tickNumber: _propTypes.default.number,
263
+ tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
262
264
  tickSize: _propTypes.default.number,
263
265
  valueFormatter: _propTypes.default.func
264
266
  })