No Preview

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:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Rendering Limitations

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.

Charts limitations

Default limitations

The default limitations applied to the different types of charts are:

Bar Chart, Line Chart & Box plot:
  • 100 series maximum
  • If the chart has only one series: 10,000 bars maximum
  • If the chart has two series: 1,000 maximum bars per series
  • If the chart has three or more series:
    • 100 bars maximum per series
    • and 2,000 bars in total
Line chart:
  • 100 series maximum
  • If the chart has only one series: 10,000 markers maximum
  • If the chart has two series: 5,000 maximum markers per series
  • If the chart has three or more series:
    • 1,000 markers maximum per series
    • and 10,000 markers in total
Histogram:
  • limited to 64 bins
Pie chart:
  • 300 slices maximum
Gauge:
  • 50 features maximum for the gauge by feature
Scatterplot:
  • 10,000 markers maximum
  • triggers an aggregation feature passed 10,000 markers, which is also limited to 10,000 aggregated markers

Behavior when the chart exceeds the limitation

Except for scatterplot, two things happens when the limit is exceeded:

  1. A custom event arcgisChartsJSBadDataWarningRaise is fired

    Render Limitation 1
  2. A message is displayed to the user in the chart's container

    Render Limitation 2

Scatterplot aggregation

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 typeChart
134 non aggregated markersRender Limitation Aggregation 1
Max markers = 100 => grid 10x10 => 45 aggregated markersRender Limitation Aggregation 2
Max markers = 25 => grid 5x5 => 14 aggregated markersRender Limitation Aggregation 3

Customized limitations

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, }, }, });