Error Bar
Error bars in Reflex are built on Recharts, a React charting library, and created in pure Python. An error bar is a graphical representation of the uncertainty or variability of a data point in a chart, depicted as a line extending from the data point parallel to one of the axes. The data_key, width, stroke_width, stroke, and direction props can be used to customize the appearance and behavior of the error bars, specifying the data source, dimensions, color, and orientation of the error bars.
ExpandCollapse
Symmetric and Asymmetric Errors
The data_key of an rx.recharts.error_bar() points at a field in each data row, and that field controls how far the whisker extends. Use a single number for a symmetric error — the same distance above and below the point — or a two-element [low, high] list for an asymmetric error. In the example above, some rows use "errorY": 20 (symmetric) while others use "errorY": [30, 20] (asymmetric). The direction prop ("x" or "y") chooses which axis the whisker runs along, so you can show error on one or both axes at once.
Error Bars on a Line Chart
Error bars aren't limited to scatter charts. Add an rx.recharts.error_bar() as a child of an rx.recharts.line() to visualize variance or measurement uncertainty on a line chart — useful for time series such as average temperature or benchmark results.
Related Charts
Explore more chart types you can build with Reflex and Recharts in pure Python:
API Reference
rx.recharts.ErrorBar
An ErrorBar component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
direction | "x""y" | Only used for ScatterChart with error bars in two directions. Only accepts a value of "x" or "y" and makes the error bars lie in that direction. |
data_key | Union[str, int] | The key of a group of data which should be unique in an area chart. |
width | int | The width of the error bar ends. |
stroke | Union[str, Color] | The stroke color of error bar. |
stroke_width | Union[str, int, float] | The stroke width of error bar. |