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:
The cursor is set by default to different modes according to the type of chart and x-axis. Whether it is for selection or zooming, the cursor either follows one axis, or both axes.
Both axes - XY (example: selection) | One axis - X or Y (example: zoom) |
![]() | ![]() |
The current implementation follows those rules:
Chart type | x-axis type | Action | Behavior |
---|---|---|---|
Histogram | Value | Zoom | X |
Histogram | Value | Selection | XY |
Scatterplot | Value | Zoom | XY |
Scatterplot | Value | Selection | XY |
Bar chart | Category | Zoom | X (or Y when rotated) |
Bar chart | Category | Selection | XY |
Bar chart | Date | Zoom | X (or Y when rotated) |
Bar chart | Date | Selection | XY |
Line chart | Category | Zoom | X (or Y when rotated) |
Line chart | Category | Selection | X (or Y when rotated) |
Line chart | Number | Zoom | XY |
Line chart | Number | Selection | XY |
Line chart | Date | Zoom | XY |
Line chart | Date | Selection | XY |
Box plot | Category | Zoom | XY |
Box plot | Category | Selection | XY |
You can modify the default behavior for a chart by setting the component's cursorRange
property to one of those value:
MultiAxes: "multi-axes", XAxis: "x-axis", YAxis: "y-axis"
example:
myChartComponent.cursorRange = "x-axis";