Rectangle selector chart widget

[Loz-Aus]

Question

Hi There,

I've been trying to get a rectangle selector widget overlayed on a chart to trigger the chart event handler to make selections on the chart but struggling to get it to work. I'm currently using a GestureDetecor stacked with a line chart then added to a canvas to draw the rectangle. See code example below

I was trying to trigger the ChartEventType.PAN_UPDATE from within the GestureDetecor on_pan_update which does work but the e: GestureDetecor is printed so it overwrites e: LineChartEvent.

I feel like its one of those so close yet so far situations but I'm sure this can be done, I just need a push in the right direction 👍

As always any help would be greatly appreciated!
Thanks in advance

Code sample

from flet import * 
from flet_charts import * 
import flet.canvas as cv


## line chart event ##
def chart_event(e: LineChartEvent):
    print(e)

## line chart demo ###
chart = LineChart(
    tooltip=LineChartTooltip(
        bgcolor="white,0.8",
        fit_inside_horizontally=True,
        fit_inside_vertically=True,
        max_width=200,
        border_side=BorderSide(
            width=1,
            color="grey,0.8"
        )
    ),
    point_line_end=623,
    on_event=chart_event,
    bgcolor="whtie,0",
    data_series=LineChartData(
        stroke_width=2,
        color=Colors.RED,
        below_line_gradient=None,
        selected_below_line=ChartPointLine(
            width=0.5,
            color="black",
            dash_pattern=[2,4]
        ),
        curved=False,
        below_line = None,
        prevent_curve_over_shooting=True,
        rounded_stroke_cap=True,
        points=[
            LineChartDataPoint(0, 100,point=True),
            LineChartDataPoint(1, 234,point=True),
            LineChartDataPoint(2, 123,point=True),
            LineChartDataPoint(3, 323,point=True),
            LineChartDataPoint(4, 423,point=True),
            LineChartDataPoint(5, 489,point=True),
            LineChartDataPoint(6, 523,point=True),
            LineChartDataPoint(7, 403,point=True),
            LineChartDataPoint(8, 389,point=True),
            LineChartDataPoint(9, 590,point=True),
            LineChartDataPoint(10, 623,point=True)
        ],
    ),
    min_x=0,
    max_x=10,
    min_y=0,
    max_y=623
)


## gesture detector rectangle selector setup ##
class State:
    x: float
    y: float

class Rec:
    x: float
    y: float

state = State()
rec = Rec()
rec.x = 0
rec.y = 0

def pan_start(e: DragStartEvent):

    state.x = e.local_position.x
    state.y = e.local_position.y

def pan_update(e: DragUpdateEvent):
        
    rec.x += e.local_delta.x
    rec.y += e.local_delta.y

    # trigger the event handler on the chart
    # ideally trigger then hover event on the chart here to select the points using the rectangle selector
    chart.on_event(e)

    cp.shapes.clear()
    cp.shapes.append(
        cv.Rect(
            state.x, 
            state.y,
            rec.x, 
            rec.y, 
            paint=Paint(
                color=Colors.with_opacity(1, Colors.GREY),
                stroke_width=1,
                stroke_dash_pattern=[5, 5],
                style=PaintingStyle.STROKE # for the border
            ),
            border_radius=2
        )
    )
    cp.shapes.append(
        cv.Rect(
            state.x, 
            state.y,
            rec.x, 
            rec.y, 
            paint=Paint(
                color=Colors.with_opacity(0.2, Colors.BLUE),
                stroke_width=1,
                style=PaintingStyle.FILL # for the content
            ),
            border_radius=2
        )
    )
    cp.update()

def pan_end(e: DragEndEvent):
    rec.x = 0
    rec.y = 0
    cp.shapes.clear()
    cp.update()


#### instances ###
gest = GestureDetector(
    expand=True,
    on_pan_start=pan_start,
    on_pan_update=pan_update,
    on_pan_end=pan_end,
    drag_interval=1
)

stacking = Stack(
    controls=[
        chart,
        gest,
    ],
    expand=True
)

# add canvas to draw the rectangle selector
cp = cv.Canvas(
    content=stacking,
    expand=True
)

### paging ###
async def main(page: Page):

    page.add(cp)

run(main=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.