Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
For performance reasons, the chart components have intentional limitations on the maximum number of elements (bars, points, slices) they can display. Default limitations are applied, but they can be customized. Additionally, the scatter plot has the particularity of triggering an automatic aggregation feature when a specific threshold is reached.
The default limitations applied to the different types of charts are:
Except for scatterplot, two things happens when the limit is exceeded:
A custom event arcgisChartsJSBadDataWarningRaise
is fired
A message is displayed to the user in the chart's container
Scatterplot benefits from an automatic aggregation mechanism when the number of markers exceeds the authorized limit.
For instance if the limit is set to 5,000 and there are 7,500 features to display, the markers will be aggregated.
The aggregation threshold and the number of markers to be displayed after aggregation can both be customized.
The maximum number of markers after aggregation determines the size of the aggregation grid. For instance the default one is 100x100, allowing to display a maximum of 10,000 points. If that number is customized to 100, the grid will be 10x10. Each region (or cell) might or might not contain data, which allows displaying a maximum 100 points (but it will be less in most cases).
Examples:
Aggregation type | Chart |
134 non aggregated markers | ![]() |
Max markers = 100 => grid 10x10 => 45 aggregated markers | ![]() |
Max markers = 25 => grid 5x5 => 14 aggregated markers | ![]() |
The default limitations can be overridden by setting the chartOptions.chartLimits
property passed to the createChart()
and update()
functions.
await createChart({ chartContainer, chartConfig, options: { chartLimits: { maxBarChartSeriesCount: 10, maxBarUniqueSeriesCountTotal: 10, maxBarTwoSeriesCountPerSeries: 10, maxBarTwoSeriesCountTotal: 20, maxBarThreePlusSeriesCountPerSeries: 10, maxBarThreePlusSeriesCountTotal: 100, maxScatterPointsBeforeAggregation: 500, maxScatterPointsAfterAggregation: 100, maxLineChartSeriesCount: 10, maxLineUniqueSeriesCountTotal: 100, maxLineTwoSeriesCountPerSeries: 10, maxLineTwoSeriesCountTotal: 20, maxLineThreePlusSeriesCountPerSeries: 10, maxLineThreePlusSeriesCountTotal: 100, maxPieChartSliceCountTotal: 100, }, }, });