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 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.
sideBySide
, stacked
, stacked100
LTR
/RTL
; RTL
languages are those where text on chart is read from right to left [Example: Arabic - 'ar', Hebrew - 'he']CategoryAxis
, DateAxis
, ValueAxis
ASC
/DESC
[series.query.orderByFields
in the chart config]LTR
/RTL
Axis Type | Stacked Type | LTR/RTL | Rotated? | Legend position | orderByFields | Screenshot |
CategoryAxis | sideBySide | RTL | Rotated | Top | ASC | ![]() |
CategoryAxis | stacked | LTR | NotRotated | Top | ASC | ![]() |
CategoryAxis | stacked | RTL | NotRotated | Left | ASC | ![]() |
CategoryAxis | stacked | RTL | Rotated | Top | ASC | ![]() |
ValueAxis | sideBySide | RTL | Rotated | Top | ASC | ![]() |
ValueAxis | stacked | RTL | NotRotated | Left | ASC | ![]() |
ValueAxis | stacked | RTL | Rotated | Top | ASC | ![]() |
DateAxis | sideBySide | RTL | NotRotated | Left | DESC | ![]() |
DateAxis | sideBySide | RTL | Rotated | Left | DESC | ![]() |
DateAxis | sideBySide | RTL | Rotated | Top | DESC | ![]() |
DateAxis | stacked | RTL | NotRotated | Left | DESC | ![]() |
DateAxis | stacked | RTL | Rotated | Top | DESC | ![]() |
DateAxis | stacked | RTL | Rotated | Left | DESC | ![]() |
Notes to consider:
stacked
can be replaced by stacked100
in the table above and the legend ordering will remain the same.top
can be replaced by bottom
and ordering remains the same for any combination. Same goes for left
with right
.