Buridan UI

1. IntroductionReflex chart components compile to Recharts under the hood, making them highly customizable and easy to integrate with your data. By leveraging Reflex, you can effortlessly create interactive, dynamic charts with minimal configuration. Whether you're building line charts, bar charts, or complex data visualizations, Reflex streamlines the process while offering the flexibility of Recharts' robust features.

2. Setting Up Your Environment

If you haven't done so already, make sure you have the latest version of Reflex installed on your machine. Visit the installation guide to walk you through the installation process.

3. Data & State Management

Most charts in this guide use static data as an example. This approach helps keep the UI simple, clean, and the site fast. However, real-world applications will likely require the use of Reflex's state to build full-stack data applications, or any application that involves dynamic data handling.

To get started, create a separate file and define your state like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
import reflex as rx

class State(rx.State):

    data = [
        {"month": "Jan", "desktop": 186},
        {"month": "Feb", "desktop": 305},
        {"month": "Mar", "desktop": 237},
        {"month": "Apr", "desktop": 73},
        {"month": "May", "desktop": 209},
        {"month": "Jun", "desktop": 214},
    ]

4. Creating Your Chart

The Buridan UI library includes 7 chart types: area, bar, line, pie, doughnut, radar, and scatter charts. For this walkthrough, we’ll focus on area charts.

To set up the area chart, import your state class inside the file that will contain your area chart component, then create the following function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from .state import State
                            
def area_chart():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="desktop",
            fill=rx.color("accent"),
            stroke=rx.color("accent", 8),
        ),
        data=State.data,
        width="100%",
        height=250,
    )

Two main props are necessary to get the chart to show: 1. `data_key`: This defines which data field in your dataset will be used for the chart's Y-axis values. In this example, it's set to `desktop`.2. `data`: This prop links the chart to the state data, allowing the chart to visualize the data array from your state class. Here, `State.data` is used to feed the chart with data.

5. Customization: Cartesian Grid

The Cartesian Grid component in Reflex allows you to customize the grid of your chart. By default, most charts come with a basic grid, but you can easily modify it to suit your design needs.

To add a customized Cartesian grid to your chart, use the following code snippet:

1
2
3
4
5
rx.recharts.cartesian_grid(
    horizontal=True, 
    vertical=False, 
    class_name="opacity-25"
)

In this example:1. `horizontal=True`: Enables the horizontal grid lines, making it easier to follow the data along the Y-axis.2. `vertical=False`: Disables the vertical grid lines, keeping the chart cleaner and focusing on the horizontal axis.3. `class_name='opacity-25'`: Applies a low opacity to the grid lines, making them less intrusive and giving the chart a more subtle appearance.

6. Customization: XAxis

The XAxis component in Reflex allows you to customize the appearance and behavior of the horizontal axis in your chart. It controls things like axis labels, tick marks, and line visibility.The following also applies to the YAxis, however, in order to keep a consistent UI, the buridan charts typically lack the YAxis.

To customize the X Axis, you can use the following code snippet:

1
2
3
4
5
6
7
8
rx.recharts.x_axis(
    data_key="month",
    axis_line=False,
    tick_size=10,
    tick_line=False,
    custom_attrs={"fontSize": "12px"},
    interval="preserveStartEnd",
)

In this example:1. `data_key='month'`: Sets the data field for the X-axis labels (in this case, the 'month' field).2. `axis_line=False`: Hides the axis line, making the X-axis without a visible line.3. `tick_size=10`: Sets the size of the tick marks on the X-axis.4. `tick_line=False`: Disables the tick lines, so they won’t be drawn on the X-axis.5. `custom_attrs={'fontSize': '12px'}`: Customizes the font size of the tick labels.6. `interval='preserveStartEnd'`: Ensures that the first and last ticks are always visible, even if there’s overlap.

7. Customization: ToolTip (Advanced)

The ToolTip component in Reflex is highly customizable and allows you to create rich, interactive tooltips for your charts. It provides a variety of props for controlling animations, styling, and behavior of the tooltip content. Since it has many props, we’ll focus on how you can customize its styles using a dictionary instead of a data class for a more flexible approach.

To customize the tooltip with a dictionary, use the following code snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
tooltip_styles = {
    "is_animation_active": False,
    "separator": "",
    "cursor": False,
    "item_style": {
        "color": "currentColor",
        "display": "flex",
        "paddingBottom": "0px",
        "justifyContent": "space-between",
        "textTransform": "capitalize",
    },
    "label_style": {
        "color": rx.color("slate", 9),
        "fontWeight": "500",
    },
    "content_style": {
        "background": rx.color("slate", 1),
        "borderColor": rx.color("slate", 5),
        "borderRadius": "5px",
        "fontFamily": "var(--font-instrument-sans)",
        "fontSize": "0.875rem",
        "lineHeight": "1.25rem",
        "fontWeight": "500",
        "letterSpacing": "-0.01rem",
        "minWidth": "8rem",
        "width": "175px",
        "padding": "0.375rem 0.625rem ",
        "position": "relative",
    },
    "general_style": "[&_.recharts-tooltip-item-separator]:w-full",
}

In this example, we are using a dictionary to define various style properties for the tooltip, such as `item_style`, `label_style`, and `content_style`. These properties control the look and feel of the tooltip, from the color of the text to the layout of the content. The `general_style` prop is used to apply additional custom styles to specific parts of the tooltip.

8. Final ThoughtsIn this walkthrough, we covered how to set up and customize your Reflex charts. We explored setting up state, creating a chart, customizing the Cartesian grid, X axis, and advanced tooltip features. With Reflex, you can build highly interactive and customizable charts that are easy to integrate into your applications.

Home

Charts UI