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.

Legend Ordering

The order of markers in a chart legend are ought to follow the same order of the chart's series. Ordering of the legend markers on a Bar chart, Line chart, Histogram, Pie chart and Box plot can vary depending on the chart configuration.

Bar Charts and Line Charts

  • Stacked types: sideBySide, stacked, stacked100
  • Language: LTR/RTL; RTL languages are those where text on chart is read from right to left [Example: Arabic - 'ar', Hebrew - 'he']
  • Chart Rotation
  • Legend position: Left, Right, Top, Bottom
  • Type of axis: CategoryAxis, DateAxis, ValueAxis
  • OrderByFields: ASC/DESC [series.query.orderByFields in the chart config]

Histograms and Pie Charts

  • Language: LTR/RTL
  • Legend position: Left, Right, Top, Bottom

Scenarios for Bar Charts and Line Charts

Axis TypeStacked TypeLTR/RTLRotated?Legend positionorderByFieldsScreenshot
CategoryAxissideBySideRTLRotatedTopASCCategoryAxis 1
CategoryAxisstackedLTRNotRotatedTopASCCategoryAxis 2
CategoryAxisstackedRTLNotRotatedLeftASCCategoryAxis 3
CategoryAxisstackedRTLRotatedTopASCCategoryAxis 4
ValueAxissideBySideRTLRotatedTopASCValueAxis 1
ValueAxisstackedRTLNotRotatedLeftASCValueAxis 2
ValueAxisstackedRTLRotatedTopASCValueAxis 3
DateAxissideBySideRTLNotRotatedLeftDESCDateAxis 1
DateAxissideBySideRTLRotatedLeftDESCDateAxis 2
DateAxissideBySideRTLRotatedTopDESCDateAxis 3
DateAxisstackedRTLNotRotatedLeftDESCDateAxis 4
DateAxisstackedRTLRotatedTopDESCDateAxis 5
DateAxisstackedRTLRotatedLeftDESCDateAxis 6

Notes to consider:

  • Legend ordering for Box plots is similar to Bar charts and Line charts, except that box plots don't have a stacked type.
  • stacked can be replaced by stacked100 in the table above and the legend ordering will remain the same.
  • Legend position top can be replaced by bottom and ordering remains the same for any combination. Same goes for left with right.