@mui/x-charts 6.0.0-alpha.15 → 6.0.0-alpha.17

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 (184) hide show
  1. package/BarChart/BarChart.d.ts +13 -2
  2. package/BarChart/BarChart.js +45 -3
  3. package/BarChart/BarElement.d.ts +1318 -3
  4. package/BarChart/BarElement.js +10 -8
  5. package/BarChart/BarPlot.d.ts +17 -1
  6. package/BarChart/BarPlot.js +152 -66
  7. package/BarChart/formatter.js +1 -1
  8. package/CHANGELOG.md +131 -0
  9. package/ChartContainer/index.js +5 -2
  10. package/ChartsAxis/ChartsAxis.js +18 -2
  11. package/ChartsAxis/axisClasses.d.ts +1 -1
  12. package/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
  13. package/ChartsClipPath/ChartsClipPath.js +2 -2
  14. package/ChartsLegend/ChartsLegend.d.ts +2 -1
  15. package/ChartsLegend/ChartsLegend.js +12 -8
  16. package/ChartsSurface.js +2 -2
  17. package/ChartsTooltip/ChartsAxisTooltipContent.js +29 -23
  18. package/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
  19. package/ChartsTooltip/ChartsTooltip.js +2 -2
  20. package/ChartsTooltip/utils.js +2 -2
  21. package/ChartsXAxis/ChartsXAxis.js +123 -35
  22. package/ChartsYAxis/ChartsYAxis.js +38 -16
  23. package/LineChart/AreaElement.d.ts +10 -0
  24. package/LineChart/AreaElement.js +12 -2
  25. package/LineChart/AreaPlot.d.ts +11 -0
  26. package/LineChart/AreaPlot.js +24 -7
  27. package/LineChart/LineChart.d.ts +10 -0
  28. package/LineChart/LineChart.js +36 -2
  29. package/LineChart/LineElement.d.ts +10 -0
  30. package/LineChart/LineElement.js +12 -2
  31. package/LineChart/LineHighlightElement.d.ts +10 -0
  32. package/LineChart/LineHighlightElement.js +12 -2
  33. package/LineChart/LineHighlightPlot.d.ts +10 -0
  34. package/LineChart/LineHighlightPlot.js +14 -3
  35. package/LineChart/LinePlot.d.ts +10 -0
  36. package/LineChart/LinePlot.js +22 -11
  37. package/LineChart/MarkElement.d.ts +10 -0
  38. package/LineChart/MarkElement.js +12 -2
  39. package/LineChart/MarkPlot.d.ts +10 -0
  40. package/LineChart/MarkPlot.js +40 -9
  41. package/LineChart/formatter.js +4 -3
  42. package/PieChart/PieArc.js +2 -2
  43. package/PieChart/PieArcLabel.js +2 -2
  44. package/PieChart/PieChart.d.ts +10 -0
  45. package/PieChart/PieChart.js +37 -2
  46. package/PieChart/PiePlot.d.ts +10 -0
  47. package/PieChart/PiePlot.js +12 -2
  48. package/ResponsiveChartContainer/index.js +4 -4
  49. package/ScatterChart/Scatter.d.ts +10 -0
  50. package/ScatterChart/Scatter.js +12 -2
  51. package/ScatterChart/ScatterChart.d.ts +10 -0
  52. package/ScatterChart/ScatterChart.js +36 -2
  53. package/ScatterChart/ScatterPlot.d.ts +10 -0
  54. package/ScatterChart/ScatterPlot.js +12 -2
  55. package/SparkLineChart/SparkLineChart.d.ts +9 -0
  56. package/SparkLineChart/SparkLineChart.js +16 -2
  57. package/context/CartesianContextProvider.js +10 -2
  58. package/context/DrawingProvider.js +2 -2
  59. package/context/HighlightProvider.js +2 -2
  60. package/context/InteractionProvider.js +2 -2
  61. package/context/SeriesContextProvider.js +2 -2
  62. package/esm/BarChart/BarChart.js +43 -1
  63. package/esm/BarChart/BarElement.js +7 -4
  64. package/esm/BarChart/BarPlot.js +152 -67
  65. package/esm/BarChart/formatter.js +1 -1
  66. package/esm/ChartContainer/index.js +3 -0
  67. package/esm/ChartsAxis/ChartsAxis.js +16 -0
  68. package/esm/ChartsLegend/ChartsLegend.js +10 -6
  69. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +27 -21
  70. package/esm/ChartsXAxis/ChartsXAxis.js +122 -34
  71. package/esm/ChartsYAxis/ChartsYAxis.js +36 -14
  72. package/esm/LineChart/AreaElement.js +10 -0
  73. package/esm/LineChart/AreaPlot.js +24 -6
  74. package/esm/LineChart/LineChart.js +34 -0
  75. package/esm/LineChart/LineElement.js +10 -0
  76. package/esm/LineChart/LineHighlightElement.js +10 -0
  77. package/esm/LineChart/LineHighlightPlot.js +12 -1
  78. package/esm/LineChart/LinePlot.js +23 -14
  79. package/esm/LineChart/MarkElement.js +10 -0
  80. package/esm/LineChart/MarkPlot.js +38 -7
  81. package/esm/LineChart/formatter.js +7 -3
  82. package/esm/PieChart/PieChart.js +35 -0
  83. package/esm/PieChart/PiePlot.js +10 -0
  84. package/esm/ResponsiveChartContainer/index.js +2 -2
  85. package/esm/ScatterChart/Scatter.js +10 -0
  86. package/esm/ScatterChart/ScatterChart.js +34 -0
  87. package/esm/ScatterChart/ScatterPlot.js +10 -0
  88. package/esm/SparkLineChart/SparkLineChart.js +14 -0
  89. package/esm/context/CartesianContextProvider.js +8 -0
  90. package/esm/hooks/useMounted.js +16 -0
  91. package/esm/hooks/useReducedMotion.js +27 -0
  92. package/esm/hooks/useTicks.js +12 -6
  93. package/esm/internals/components/ChartsText.js +19 -13
  94. package/esm/internals/geometry.js +36 -0
  95. package/hooks/useAxisEvents.js +2 -2
  96. package/hooks/useChartDimensions.js +2 -2
  97. package/hooks/useDrawingArea.js +2 -2
  98. package/hooks/useInteractionItemProps.js +2 -2
  99. package/hooks/useMounted.d.ts +1 -0
  100. package/hooks/useMounted.js +25 -0
  101. package/hooks/useReducedMotion.d.ts +8 -0
  102. package/hooks/useReducedMotion.js +33 -0
  103. package/hooks/useScale.d.ts +2 -2
  104. package/hooks/useScale.js +2 -2
  105. package/hooks/useTicks.d.ts +18 -9
  106. package/hooks/useTicks.js +14 -8
  107. package/index.js +1 -1
  108. package/internals/components/ChartsText.d.ts +11 -8
  109. package/internals/components/ChartsText.js +21 -15
  110. package/internals/defaultizeColor.d.ts +2 -2
  111. package/internals/domUtils.d.ts +0 -1
  112. package/internals/geometry.d.ts +9 -0
  113. package/internals/geometry.js +42 -0
  114. package/legacy/BarChart/BarChart.js +43 -1
  115. package/legacy/BarChart/BarElement.js +6 -3
  116. package/legacy/BarChart/BarPlot.js +151 -63
  117. package/legacy/BarChart/formatter.js +1 -1
  118. package/legacy/ChartContainer/index.js +3 -0
  119. package/legacy/ChartsAxis/ChartsAxis.js +16 -0
  120. package/legacy/ChartsLegend/ChartsLegend.js +14 -7
  121. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +5 -1
  122. package/legacy/ChartsXAxis/ChartsXAxis.js +126 -36
  123. package/legacy/ChartsYAxis/ChartsYAxis.js +36 -14
  124. package/legacy/LineChart/AreaElement.js +10 -0
  125. package/legacy/LineChart/AreaPlot.js +27 -7
  126. package/legacy/LineChart/LineChart.js +34 -0
  127. package/legacy/LineChart/LineElement.js +10 -0
  128. package/legacy/LineChart/LineHighlightElement.js +10 -0
  129. package/legacy/LineChart/LineHighlightPlot.js +12 -1
  130. package/legacy/LineChart/LinePlot.js +25 -12
  131. package/legacy/LineChart/MarkElement.js +10 -0
  132. package/legacy/LineChart/MarkPlot.js +37 -7
  133. package/legacy/LineChart/formatter.js +7 -3
  134. package/legacy/PieChart/PieChart.js +35 -0
  135. package/legacy/PieChart/PiePlot.js +10 -0
  136. package/legacy/ResponsiveChartContainer/index.js +2 -2
  137. package/legacy/ScatterChart/Scatter.js +10 -0
  138. package/legacy/ScatterChart/ScatterChart.js +34 -0
  139. package/legacy/ScatterChart/ScatterPlot.js +10 -0
  140. package/legacy/SparkLineChart/SparkLineChart.js +14 -0
  141. package/legacy/context/CartesianContextProvider.js +8 -0
  142. package/legacy/hooks/useMounted.js +21 -0
  143. package/legacy/hooks/useReducedMotion.js +27 -0
  144. package/legacy/hooks/useTicks.js +13 -6
  145. package/legacy/index.js +1 -1
  146. package/legacy/internals/components/ChartsText.js +17 -15
  147. package/legacy/internals/geometry.js +37 -0
  148. package/models/axis.d.ts +19 -2
  149. package/models/seriesType/line.d.ts +3 -3
  150. package/modern/BarChart/BarChart.js +43 -1
  151. package/modern/BarChart/BarElement.js +7 -4
  152. package/modern/BarChart/BarPlot.js +149 -65
  153. package/modern/BarChart/formatter.js +1 -1
  154. package/modern/ChartContainer/index.js +3 -0
  155. package/modern/ChartsAxis/ChartsAxis.js +16 -0
  156. package/modern/ChartsLegend/ChartsLegend.js +10 -6
  157. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +27 -21
  158. package/modern/ChartsXAxis/ChartsXAxis.js +122 -34
  159. package/modern/ChartsYAxis/ChartsYAxis.js +36 -14
  160. package/modern/LineChart/AreaElement.js +10 -0
  161. package/modern/LineChart/AreaPlot.js +22 -5
  162. package/modern/LineChart/LineChart.js +34 -0
  163. package/modern/LineChart/LineElement.js +10 -0
  164. package/modern/LineChart/LineHighlightElement.js +10 -0
  165. package/modern/LineChart/LineHighlightPlot.js +12 -1
  166. package/modern/LineChart/LinePlot.js +20 -9
  167. package/modern/LineChart/MarkElement.js +10 -0
  168. package/modern/LineChart/MarkPlot.js +38 -7
  169. package/modern/LineChart/formatter.js +4 -3
  170. package/modern/PieChart/PieChart.js +35 -0
  171. package/modern/PieChart/PiePlot.js +10 -0
  172. package/modern/ResponsiveChartContainer/index.js +2 -2
  173. package/modern/ScatterChart/Scatter.js +10 -0
  174. package/modern/ScatterChart/ScatterChart.js +34 -0
  175. package/modern/ScatterChart/ScatterPlot.js +10 -0
  176. package/modern/SparkLineChart/SparkLineChart.js +14 -0
  177. package/modern/context/CartesianContextProvider.js +8 -0
  178. package/modern/hooks/useMounted.js +16 -0
  179. package/modern/hooks/useReducedMotion.js +27 -0
  180. package/modern/hooks/useTicks.js +12 -6
  181. package/modern/index.js +1 -1
  182. package/modern/internals/components/ChartsText.js +19 -13
  183. package/modern/internals/geometry.js +36 -0
  184. package/package.json +5 -3
@@ -16,6 +16,16 @@ import { ChartsClipPath } from '../ChartsClipPath';
16
16
  import { LineHighlightPlot } from './LineHighlightPlot';
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
+ /**
20
+ * Demos:
21
+ *
22
+ * - [Lines](https://mui.com/x/react-charts/lines/)
23
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
24
+ *
25
+ * API:
26
+ *
27
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
28
+ */
19
29
  var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
20
30
  var xAxis = props.xAxis,
21
31
  yAxis = props.yAxis,
@@ -125,11 +135,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
125
135
  fill: PropTypes.string,
126
136
  label: PropTypes.string,
127
137
  labelFontSize: PropTypes.number,
138
+ labelStyle: PropTypes.object,
128
139
  position: PropTypes.oneOf(['bottom', 'top']),
129
140
  slotProps: PropTypes.object,
130
141
  slots: PropTypes.object,
131
142
  stroke: PropTypes.string,
132
143
  tickFontSize: PropTypes.number,
144
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
145
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
146
+ tickLabelStyle: PropTypes.object,
133
147
  tickMaxStep: PropTypes.number,
134
148
  tickMinStep: PropTypes.number,
135
149
  tickNumber: PropTypes.number,
@@ -162,11 +176,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
162
176
  fill: PropTypes.string,
163
177
  label: PropTypes.string,
164
178
  labelFontSize: PropTypes.number,
179
+ labelStyle: PropTypes.object,
165
180
  position: PropTypes.oneOf(['left', 'right']),
166
181
  slotProps: PropTypes.object,
167
182
  slots: PropTypes.object,
168
183
  stroke: PropTypes.string,
169
184
  tickFontSize: PropTypes.number,
185
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
186
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
187
+ tickLabelStyle: PropTypes.object,
170
188
  tickMaxStep: PropTypes.number,
171
189
  tickMinStep: PropTypes.number,
172
190
  tickNumber: PropTypes.number,
@@ -205,11 +223,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
205
223
  fill: PropTypes.string,
206
224
  label: PropTypes.string,
207
225
  labelFontSize: PropTypes.number,
226
+ labelStyle: PropTypes.object,
208
227
  position: PropTypes.oneOf(['left', 'right']),
209
228
  slotProps: PropTypes.object,
210
229
  slots: PropTypes.object,
211
230
  stroke: PropTypes.string,
212
231
  tickFontSize: PropTypes.number,
232
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
233
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
234
+ tickLabelStyle: PropTypes.object,
213
235
  tickMaxStep: PropTypes.number,
214
236
  tickMinStep: PropTypes.number,
215
237
  tickNumber: PropTypes.number,
@@ -270,11 +292,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
270
292
  fill: PropTypes.string,
271
293
  label: PropTypes.string,
272
294
  labelFontSize: PropTypes.number,
295
+ labelStyle: PropTypes.object,
273
296
  position: PropTypes.oneOf(['bottom', 'top']),
274
297
  slotProps: PropTypes.object,
275
298
  slots: PropTypes.object,
276
299
  stroke: PropTypes.string,
277
300
  tickFontSize: PropTypes.number,
301
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
302
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
303
+ tickLabelStyle: PropTypes.object,
278
304
  tickMaxStep: PropTypes.number,
279
305
  tickMinStep: PropTypes.number,
280
306
  tickNumber: PropTypes.number,
@@ -299,6 +325,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
299
325
  id: PropTypes.string,
300
326
  label: PropTypes.string,
301
327
  labelFontSize: PropTypes.number,
328
+ labelStyle: PropTypes.object,
302
329
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
303
330
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
304
331
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -307,6 +334,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
307
334
  slots: PropTypes.object,
308
335
  stroke: PropTypes.string,
309
336
  tickFontSize: PropTypes.number,
337
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
338
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
339
+ tickLabelStyle: PropTypes.object,
310
340
  tickMaxStep: PropTypes.number,
311
341
  tickMinStep: PropTypes.number,
312
342
  tickNumber: PropTypes.number,
@@ -325,6 +355,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
325
355
  id: PropTypes.string,
326
356
  label: PropTypes.string,
327
357
  labelFontSize: PropTypes.number,
358
+ labelStyle: PropTypes.object,
328
359
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
329
360
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
330
361
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -333,6 +364,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
333
364
  slots: PropTypes.object,
334
365
  stroke: PropTypes.string,
335
366
  tickFontSize: PropTypes.number,
367
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
368
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
369
+ tickLabelStyle: PropTypes.object,
336
370
  tickMaxStep: PropTypes.number,
337
371
  tickMinStep: PropTypes.number,
338
372
  tickNumber: PropTypes.number,
@@ -58,6 +58,16 @@ LineElementPath.propTypes = {
58
58
  }).isRequired,
59
59
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
60
60
  };
61
+ /**
62
+ * Demos:
63
+ *
64
+ * - [Lines](https://mui.com/x/react-charts/lines/)
65
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
66
+ *
67
+ * API:
68
+ *
69
+ * - [LineElement API](https://mui.com/x/api/charts/line-element/)
70
+ */
61
71
  function LineElement(props) {
62
72
  var _slots$line;
63
73
  var id = props.id,
@@ -34,6 +34,16 @@ var HighlightElement = styled('circle', {
34
34
  fill: ownerState.color
35
35
  };
36
36
  });
37
+ /**
38
+ * Demos:
39
+ *
40
+ * - [Lines](https://mui.com/x/react-charts/lines/)
41
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
42
+ *
43
+ * API:
44
+ *
45
+ * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
46
+ */
37
47
  function LineHighlightElement(props) {
38
48
  var x = props.x,
39
49
  y = props.y,
@@ -9,6 +9,16 @@ import { LineHighlightElement } from './LineHighlightElement';
9
9
  import { getValueToPositionMapper } from '../hooks/useScale';
10
10
  import { InteractionContext } from '../context/InteractionProvider';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
+ /**
13
+ * Demos:
14
+ *
15
+ * - [Lines](https://mui.com/x/react-charts/lines/)
16
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
17
+ *
18
+ * API:
19
+ *
20
+ * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
21
+ */
12
22
  function LineHighlightPlot(props) {
13
23
  var _axis$x, _slots$lineHighlight;
14
24
  var slots = props.slots,
@@ -44,8 +54,9 @@ function LineHighlightPlot(props) {
44
54
  _series$seriesId$yAxi = _series$seriesId.yAxisKey,
45
55
  yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
46
56
  stackedData = _series$seriesId.stackedData,
57
+ data = _series$seriesId.data,
47
58
  disableHighlight = _series$seriesId.disableHighlight;
48
- if (disableHighlight) {
59
+ if (disableHighlight || data[highlightedIndex] == null) {
49
60
  return null;
50
61
  }
51
62
  var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
@@ -10,6 +10,16 @@ import { LineElement } from './LineElement';
10
10
  import { getValueToPositionMapper } from '../hooks/useScale';
11
11
  import getCurveFactory from '../internals/getCurve';
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
+ /**
14
+ * Demos:
15
+ *
16
+ * - [Lines](https://mui.com/x/react-charts/lines/)
17
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
18
+ *
19
+ * API:
20
+ *
21
+ * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
22
+ */
13
23
  function LinePlot(props) {
14
24
  var slots = props.slots,
15
25
  slotProps = props.slotProps,
@@ -31,36 +41,39 @@ function LinePlot(props) {
31
41
  children: stackingGroups.flatMap(function (_ref) {
32
42
  var groupIds = _ref.ids;
33
43
  return groupIds.flatMap(function (seriesId) {
44
+ var _xData$map;
34
45
  var _series$seriesId = series[seriesId],
35
46
  _series$seriesId$xAxi = _series$seriesId.xAxisKey,
36
47
  xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
37
48
  _series$seriesId$yAxi = _series$seriesId.yAxisKey,
38
49
  yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
39
- stackedData = _series$seriesId.stackedData;
50
+ stackedData = _series$seriesId.stackedData,
51
+ data = _series$seriesId.data;
40
52
  var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
41
53
  var yScale = yAxis[yAxisKey].scale;
42
54
  var xData = xAxis[xAxisKey].data;
43
- if (xData === undefined) {
44
- throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
55
+ if (process.env.NODE_ENV !== 'production') {
56
+ if (xData === undefined) {
57
+ throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
58
+ }
59
+ if (xData.length < stackedData.length) {
60
+ throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
61
+ }
45
62
  }
46
63
  var linePath = d3Line().x(function (d) {
47
64
  return xScale(d.x);
65
+ }).defined(function (_, i) {
66
+ return data[i] != null;
48
67
  }).y(function (d) {
49
68
  return yScale(d.y[1]);
50
69
  });
51
- if (process.env.NODE_ENV !== 'production') {
52
- if (xData.length !== stackedData.length) {
53
- throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) does not match length of series (").concat(stackedData.length, " items)"));
54
- }
55
- }
56
70
  var curve = getCurveFactory(series[seriesId].curve);
57
- var d3Data = xData == null ? void 0 : xData.map(function (x, index) {
58
- var _stackedData$index;
71
+ var d3Data = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
59
72
  return {
60
73
  x: x,
61
- y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
74
+ y: stackedData[index]
62
75
  };
63
- });
76
+ })) != null ? _xData$map : [];
64
77
  return /*#__PURE__*/_jsx(LineElement, {
65
78
  id: seriesId,
66
79
  d: linePath.curve(curve)(d3Data) || undefined,
@@ -60,6 +60,16 @@ MarkElementPath.propTypes = {
60
60
  }).isRequired,
61
61
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
62
62
  };
63
+ /**
64
+ * Demos:
65
+ *
66
+ * - [Lines](https://mui.com/x/react-charts/lines/)
67
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
68
+ *
69
+ * API:
70
+ *
71
+ * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
72
+ */
63
73
  function MarkElement(props) {
64
74
  var _axis$x;
65
75
  var x = props.x,
@@ -9,6 +9,16 @@ import { CartesianContext } from '../context/CartesianContextProvider';
9
9
  import { MarkElement } from './MarkElement';
10
10
  import { getValueToPositionMapper } from '../hooks/useScale';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
+ /**
13
+ * Demos:
14
+ *
15
+ * - [Lines](https://mui.com/x/react-charts/lines/)
16
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
17
+ *
18
+ * API:
19
+ *
20
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
21
+ */
12
22
  function MarkPlot(props) {
13
23
  var _slots$mark;
14
24
  var slots = props.slots,
@@ -38,6 +48,7 @@ function MarkPlot(props) {
38
48
  _series$seriesId$yAxi = _series$seriesId.yAxisKey,
39
49
  yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
40
50
  stackedData = _series$seriesId.stackedData,
51
+ data = _series$seriesId.data,
41
52
  _series$seriesId$show = _series$seriesId.showMark,
42
53
  showMark = _series$seriesId$show === void 0 ? true : _series$seriesId$show;
43
54
  if (showMark === false) {
@@ -63,27 +74,46 @@ function MarkPlot(props) {
63
74
  throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
64
75
  }
65
76
  return xData == null ? void 0 : xData.map(function (x, index) {
66
- var y = stackedData[index][1];
77
+ var value = data[index] == null ? null : stackedData[index][1];
67
78
  return {
68
79
  x: xScale(x),
69
- y: yScale(y),
80
+ y: value === null ? null : yScale(value),
70
81
  position: x,
71
- value: y,
82
+ value: value,
72
83
  index: index
73
84
  };
74
- }).filter(isInRange).map(function (_ref3) {
85
+ }).filter(function (_ref3) {
75
86
  var x = _ref3.x,
76
87
  y = _ref3.y,
77
88
  index = _ref3.index,
78
89
  position = _ref3.position,
79
90
  value = _ref3.value;
80
- return showMark === true || showMark({
91
+ if (value === null || y === null) {
92
+ // Remove missing data point
93
+ return false;
94
+ }
95
+ if (!isInRange({
96
+ x: x,
97
+ y: y
98
+ })) {
99
+ // Remove out of range
100
+ return false;
101
+ }
102
+ if (showMark === true) {
103
+ return true;
104
+ }
105
+ return showMark({
81
106
  x: x,
82
107
  y: y,
83
108
  index: index,
84
109
  position: position,
85
110
  value: value
86
- }) ? /*#__PURE__*/_jsx(Mark, _extends({
111
+ });
112
+ }).map(function (_ref4) {
113
+ var x = _ref4.x,
114
+ y = _ref4.y,
115
+ index = _ref4.index;
116
+ return /*#__PURE__*/_jsx(Mark, _extends({
87
117
  id: seriesId,
88
118
  dataIndex: index,
89
119
  shape: "circle",
@@ -91,7 +121,7 @@ function MarkPlot(props) {
91
121
  x: x,
92
122
  y: y,
93
123
  highlightScope: series[seriesId].highlightScope
94
- }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index)) : null;
124
+ }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
95
125
  });
96
126
  });
97
127
  })
@@ -22,7 +22,7 @@ var formatter = function formatter(params, dataset) {
22
22
  d3Dataset[index][id] = value;
23
23
  }
24
24
  });
25
- } else if (dataset === undefined) {
25
+ } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
26
26
  throw new Error(["MUI: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
27
27
  }
28
28
  });
@@ -36,7 +36,11 @@ var formatter = function formatter(params, dataset) {
36
36
  // Use dataKey if needed and available
37
37
  var dataKey = series[id].dataKey;
38
38
  return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
39
- })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
39
+ })).value(function (d, key) {
40
+ var _d$key;
41
+ return (_d$key = d[key]) != null ? _d$key : 0;
42
+ }) // defaultize null value to 0
43
+ .order(stackingOrder).offset(stackingOffset)(d3Dataset);
40
44
  ids.forEach(function (id, index) {
41
45
  var dataKey = series[id].dataKey;
42
46
  completedSeries[id] = _extends({}, series[id], {
@@ -56,7 +60,7 @@ var formatter = function formatter(params, dataset) {
56
60
  seriesOrder: seriesOrder,
57
61
  stackingGroups: stackingGroups,
58
62
  series: defaultizeValueFormatter(completedSeries, function (v) {
59
- return v.toLocaleString();
63
+ return v == null ? void 0 : v.toLocaleString();
60
64
  })
61
65
  };
62
66
  };
@@ -17,6 +17,17 @@ var defaultMargin = {
17
17
  left: 5,
18
18
  right: 100
19
19
  };
20
+
21
+ /**
22
+ * Demos:
23
+ *
24
+ * - [Pie](https://mui.com/x/react-charts/pie/)
25
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
26
+ *
27
+ * API:
28
+ *
29
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
30
+ */
20
31
  function PieChart(props) {
21
32
  var xAxis = props.xAxis,
22
33
  yAxis = props.yAxis,
@@ -117,11 +128,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
117
128
  fill: PropTypes.string,
118
129
  label: PropTypes.string,
119
130
  labelFontSize: PropTypes.number,
131
+ labelStyle: PropTypes.object,
120
132
  position: PropTypes.oneOf(['bottom', 'top']),
121
133
  slotProps: PropTypes.object,
122
134
  slots: PropTypes.object,
123
135
  stroke: PropTypes.string,
124
136
  tickFontSize: PropTypes.number,
137
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
138
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
139
+ tickLabelStyle: PropTypes.object,
125
140
  tickMaxStep: PropTypes.number,
126
141
  tickMinStep: PropTypes.number,
127
142
  tickNumber: PropTypes.number,
@@ -150,11 +165,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
150
165
  fill: PropTypes.string,
151
166
  label: PropTypes.string,
152
167
  labelFontSize: PropTypes.number,
168
+ labelStyle: PropTypes.object,
153
169
  position: PropTypes.oneOf(['left', 'right']),
154
170
  slotProps: PropTypes.object,
155
171
  slots: PropTypes.object,
156
172
  stroke: PropTypes.string,
157
173
  tickFontSize: PropTypes.number,
174
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
175
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
176
+ tickLabelStyle: PropTypes.object,
158
177
  tickMaxStep: PropTypes.number,
159
178
  tickMinStep: PropTypes.number,
160
179
  tickNumber: PropTypes.number,
@@ -194,11 +213,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
194
213
  fill: PropTypes.string,
195
214
  label: PropTypes.string,
196
215
  labelFontSize: PropTypes.number,
216
+ labelStyle: PropTypes.object,
197
217
  position: PropTypes.oneOf(['left', 'right']),
198
218
  slotProps: PropTypes.object,
199
219
  slots: PropTypes.object,
200
220
  stroke: PropTypes.string,
201
221
  tickFontSize: PropTypes.number,
222
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
223
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
224
+ tickLabelStyle: PropTypes.object,
202
225
  tickMaxStep: PropTypes.number,
203
226
  tickMinStep: PropTypes.number,
204
227
  tickNumber: PropTypes.number,
@@ -272,11 +295,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
272
295
  fill: PropTypes.string,
273
296
  label: PropTypes.string,
274
297
  labelFontSize: PropTypes.number,
298
+ labelStyle: PropTypes.object,
275
299
  position: PropTypes.oneOf(['bottom', 'top']),
276
300
  slotProps: PropTypes.object,
277
301
  slots: PropTypes.object,
278
302
  stroke: PropTypes.string,
279
303
  tickFontSize: PropTypes.number,
304
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
305
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
306
+ tickLabelStyle: PropTypes.object,
280
307
  tickMaxStep: PropTypes.number,
281
308
  tickMinStep: PropTypes.number,
282
309
  tickNumber: PropTypes.number,
@@ -301,6 +328,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
301
328
  id: PropTypes.string,
302
329
  label: PropTypes.string,
303
330
  labelFontSize: PropTypes.number,
331
+ labelStyle: PropTypes.object,
304
332
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
305
333
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
306
334
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -309,6 +337,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
309
337
  slots: PropTypes.object,
310
338
  stroke: PropTypes.string,
311
339
  tickFontSize: PropTypes.number,
340
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
341
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
342
+ tickLabelStyle: PropTypes.object,
312
343
  tickMaxStep: PropTypes.number,
313
344
  tickMinStep: PropTypes.number,
314
345
  tickNumber: PropTypes.number,
@@ -327,6 +358,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
327
358
  id: PropTypes.string,
328
359
  label: PropTypes.string,
329
360
  labelFontSize: PropTypes.number,
361
+ labelStyle: PropTypes.object,
330
362
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
331
363
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
332
364
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -335,6 +367,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
335
367
  slots: PropTypes.object,
336
368
  stroke: PropTypes.string,
337
369
  tickFontSize: PropTypes.number,
370
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
371
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
372
+ tickLabelStyle: PropTypes.object,
338
373
  tickMaxStep: PropTypes.number,
339
374
  tickMinStep: PropTypes.number,
340
375
  tickNumber: PropTypes.number,
@@ -23,6 +23,16 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
23
23
  }
24
24
  return arcLabel(item);
25
25
  }
26
+ /**
27
+ * Demos:
28
+ *
29
+ * - [Pie](https://mui.com/x/react-charts/pie/)
30
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
31
+ *
32
+ * API:
33
+ *
34
+ * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
35
+ */
26
36
  function PiePlot(props) {
27
37
  var _slots$pieArc, _slots$pieArcLabel;
28
38
  var slots = props.slots,
@@ -114,10 +114,10 @@ export var ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function Res
114
114
  width: inWidth,
115
115
  height: inHeight
116
116
  },
117
- children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
117
+ children: width && height ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
118
118
  width: width,
119
119
  height: height,
120
120
  ref: ref
121
- }))
121
+ })) : null
122
122
  });
123
123
  });
@@ -6,6 +6,16 @@ import { getValueToPositionMapper } from '../hooks/useScale';
6
6
  import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
7
7
  import { InteractionContext } from '../context/InteractionProvider';
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
+ /**
10
+ * Demos:
11
+ *
12
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
13
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
14
+ *
15
+ * API:
16
+ *
17
+ * - [Scatter API](https://mui.com/x/api/charts/scatter/)
18
+ */
9
19
  function Scatter(props) {
10
20
  var series = props.series,
11
21
  xScale = props.xScale,
@@ -9,6 +9,16 @@ import { ChartsLegend } from '../ChartsLegend';
9
9
  import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ /**
13
+ * Demos:
14
+ *
15
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
16
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
17
+ *
18
+ * API:
19
+ *
20
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
21
+ */
12
22
  var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
13
23
  var xAxis = props.xAxis,
14
24
  yAxis = props.yAxis,
@@ -85,11 +95,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
85
95
  fill: PropTypes.string,
86
96
  label: PropTypes.string,
87
97
  labelFontSize: PropTypes.number,
98
+ labelStyle: PropTypes.object,
88
99
  position: PropTypes.oneOf(['bottom', 'top']),
89
100
  slotProps: PropTypes.object,
90
101
  slots: PropTypes.object,
91
102
  stroke: PropTypes.string,
92
103
  tickFontSize: PropTypes.number,
104
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
105
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
106
+ tickLabelStyle: PropTypes.object,
93
107
  tickMaxStep: PropTypes.number,
94
108
  tickMinStep: PropTypes.number,
95
109
  tickNumber: PropTypes.number,
@@ -118,11 +132,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
118
132
  fill: PropTypes.string,
119
133
  label: PropTypes.string,
120
134
  labelFontSize: PropTypes.number,
135
+ labelStyle: PropTypes.object,
121
136
  position: PropTypes.oneOf(['left', 'right']),
122
137
  slotProps: PropTypes.object,
123
138
  slots: PropTypes.object,
124
139
  stroke: PropTypes.string,
125
140
  tickFontSize: PropTypes.number,
141
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
142
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
143
+ tickLabelStyle: PropTypes.object,
126
144
  tickMaxStep: PropTypes.number,
127
145
  tickMinStep: PropTypes.number,
128
146
  tickNumber: PropTypes.number,
@@ -161,11 +179,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
161
179
  fill: PropTypes.string,
162
180
  label: PropTypes.string,
163
181
  labelFontSize: PropTypes.number,
182
+ labelStyle: PropTypes.object,
164
183
  position: PropTypes.oneOf(['left', 'right']),
165
184
  slotProps: PropTypes.object,
166
185
  slots: PropTypes.object,
167
186
  stroke: PropTypes.string,
168
187
  tickFontSize: PropTypes.number,
188
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
189
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
190
+ tickLabelStyle: PropTypes.object,
169
191
  tickMaxStep: PropTypes.number,
170
192
  tickMinStep: PropTypes.number,
171
193
  tickNumber: PropTypes.number,
@@ -223,11 +245,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
223
245
  fill: PropTypes.string,
224
246
  label: PropTypes.string,
225
247
  labelFontSize: PropTypes.number,
248
+ labelStyle: PropTypes.object,
226
249
  position: PropTypes.oneOf(['bottom', 'top']),
227
250
  slotProps: PropTypes.object,
228
251
  slots: PropTypes.object,
229
252
  stroke: PropTypes.string,
230
253
  tickFontSize: PropTypes.number,
254
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
255
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
256
+ tickLabelStyle: PropTypes.object,
231
257
  tickMaxStep: PropTypes.number,
232
258
  tickMinStep: PropTypes.number,
233
259
  tickNumber: PropTypes.number,
@@ -252,6 +278,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
252
278
  id: PropTypes.string,
253
279
  label: PropTypes.string,
254
280
  labelFontSize: PropTypes.number,
281
+ labelStyle: PropTypes.object,
255
282
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
256
283
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
257
284
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -260,6 +287,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
260
287
  slots: PropTypes.object,
261
288
  stroke: PropTypes.string,
262
289
  tickFontSize: PropTypes.number,
290
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
291
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
292
+ tickLabelStyle: PropTypes.object,
263
293
  tickMaxStep: PropTypes.number,
264
294
  tickMinStep: PropTypes.number,
265
295
  tickNumber: PropTypes.number,
@@ -278,6 +308,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
278
308
  id: PropTypes.string,
279
309
  label: PropTypes.string,
280
310
  labelFontSize: PropTypes.number,
311
+ labelStyle: PropTypes.object,
281
312
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
282
313
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
283
314
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -286,6 +317,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
286
317
  slots: PropTypes.object,
287
318
  stroke: PropTypes.string,
288
319
  tickFontSize: PropTypes.number,
320
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
321
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
322
+ tickLabelStyle: PropTypes.object,
289
323
  tickMaxStep: PropTypes.number,
290
324
  tickMinStep: PropTypes.number,
291
325
  tickNumber: PropTypes.number,