> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.recharts.ReferenceLine - rx.recharts.ReferenceDot - rx.recharts.ReferenceArea --- # Reference ```python exec import reflex as rx ``` The Reference components in Recharts, including ReferenceLine, ReferenceArea, and ReferenceDot, are used to add visual aids and annotations to the chart, helping to highlight specific data points, ranges, or thresholds for better data interpretation and analysis. ## Reference Area The `rx.recharts.reference_area` component in Recharts is used to highlight a specific area or range on the chart by drawing a rectangular region. It is defined by specifying the coordinates (x1, x2, y1, y2) and can be used to emphasize important data ranges or intervals on the chart. ```python demo graphing data = [ {"x": 45, "y": 100, "z": 150, "errorY": [30, 20], "errorX": 5}, {"x": 100, "y": 200, "z": 200, "errorY": [20, 30], "errorX": 3}, {"x": 120, "y": 100, "z": 260, "errorY": 20, "errorX": [10, 3]}, {"x": 170, "y": 300, "z": 400, "errorY": [15, 18], "errorX": 4}, {"x": 140, "y": 250, "z": 280, "errorY": 23, "errorX": [6, 7]}, {"x": 150, "y": 400, "z": 500, "errorY": [21, 10], "errorX": 4}, {"x": 110, "y": 280, "z": 200, "errorY": 21, "errorX": [1, 8]}, ] def reference(): return rx.recharts.scatter_chart( rx.recharts.scatter(data=data, fill="#8884d8", name="A"), rx.recharts.reference_area( x1=150, x2=180, y1=150, y2=300, fill="#8884d8", fill_opacity=0.3 ), rx.recharts.x_axis(data_key="x", name="x", type_="number"), rx.recharts.y_axis(data_key="y", name="y", type_="number"), rx.recharts.graphing_tooltip(), width="100%", height=300, ) ``` ## Reference Line The `rx.recharts.reference_line` component in rx.recharts is used to draw a horizontal or vertical line on the chart at a specified position. It helps to highlight important values, thresholds, or ranges on the axis, providing visual reference points for better data interpretation. ```python demo graphing data_2 = [ {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400}, {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210}, {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290}, {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000}, {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181}, {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500}, {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100}, ] def reference_line(): return rx.recharts.area_chart( rx.recharts.area( data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7), ), rx.recharts.reference_line( x="Page C", stroke=rx.color("accent", 10), label="Max PV PAGE", ), rx.recharts.reference_line(y=9800, stroke=rx.color("green", 10), label="Max"), rx.recharts.reference_line( y=4343, stroke=rx.color("green", 10), label="Average" ), rx.recharts.x_axis(data_key="name"), rx.recharts.y_axis(), data=data_2, height=300, width="100%", ) ``` ## Reference Dot The `rx.recharts.reference_dot` component in Recharts is used to mark a specific data point on the chart with a customizable dot. It allows you to highlight important values, outliers, or thresholds by providing a visual reference marker at the specified coordinates (x, y) on the chart. ```python demo graphing data_3 = [ { "x": 45, "y": 100, "z": 150, }, { "x": 100, "y": 200, "z": 200, }, { "x": 120, "y": 100, "z": 260, }, { "x": 170, "y": 300, "z": 400, }, { "x": 140, "y": 250, "z": 280, }, { "x": 150, "y": 400, "z": 500, }, { "x": 110, "y": 280, "z": 200, }, { "x": 80, "y": 150, "z": 180, }, { "x": 200, "y": 350, "z": 450, }, { "x": 90, "y": 220, "z": 240, }, { "x": 130, "y": 320, "z": 380, }, { "x": 180, "y": 120, "z": 300, }, ] def reference_dot(): return rx.recharts.scatter_chart( rx.recharts.scatter( data=data_3, fill=rx.color("accent", 9), name="A", ), rx.recharts.x_axis(data_key="x", name="x", type_="number"), rx.recharts.y_axis(data_key="y", name="y", type_="number"), rx.recharts.reference_dot( x=160, y=350, r=15, fill=rx.color("accent", 5), stroke=rx.color("accent", 10), ), rx.recharts.reference_dot( x=170, y=300, r=20, fill=rx.color("accent", 7), ), rx.recharts.reference_dot( x=90, y=220, r=18, fill=rx.color("green", 7), ), height=200, width="100%", ) ``` ## API Reference ### rx.recharts.ReferenceLine A ReferenceLine component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `x_axis_id` | str, int | `0` | The id of x-axis which is corresponding to the data. | | `y_axis_id` | str, int | `0` | The id of y-axis which is corresponding to the data. | | `if_overflow` | Literal["discard", "hidden", "visible", "extendDomain"] | `"discard"` | Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. | | `label` | str, int | - | If set a string or a number, default label will be drawn, and the option is content. | | `x` | str, int | - | If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn. | | `y` | str, int | - | If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn. | | `stroke` | str, Color | - | The color of the reference line. | | `stroke_width` | str, int, float | `1` | The width of the stroke. | | `segment` | Sequence[Segment] | - | Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.recharts.ReferenceDot A ReferenceDot component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `x_axis_id` | str, int | `0` | The id of x-axis which is corresponding to the data. | | `y_axis_id` | str, int | `0` | The id of y-axis which is corresponding to the data. | | `if_overflow` | Literal["discard", "hidden", "visible", "extendDomain"] | `"discard"` | Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. | | `label` | str, int | - | If set a string or a number, default label will be drawn, and the option is content. | | `x` | str, int | - | If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn. | | `y` | str, int | - | If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn. | | `r` | int | - | The radius of dot. | | `fill` | str, Color | - | The color of the area fill. | | `stroke` | str, Color | - | The color of the line stroke. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.recharts.ReferenceArea A ReferenceArea component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `stroke` | str, Color | - | Stroke color. | | `fill` | str, Color | - | Fill color. | | `fill_opacity` | float | - | The opacity of area. | | `x_axis_id` | str, int | - | The id of x-axis which is corresponding to the data. | | `y_axis_id` | str, int | - | The id of y-axis which is corresponding to the data. | | `x1` | str, int | - | A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis. | | `x2` | str, int | - | A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis. | | `y1` | str, int | - | A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis. | | `y2` | str, int | - | A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis. | | `if_overflow` | Literal["discard", "hidden", "visible", "extendDomain"] | `"discard"` | Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/