click event is not working

[NourSaleh91]

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

1- built regular line chart as the following:

`import React, { useLayoutEffect } from "react"; import styled from "@emotion/styled"; import * as echarts from "echarts"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { faEye } from "@fortawesome/free-regular-svg-icons"; import ReactEcharts from "echarts-for-react";

const Container = styled.div` position: relative;

height: 100%; min-height: 187px; `;

const Content = styled.div position: absolute; //width: 410px; //height: 200%; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid rgba(0, 83, 229, 0.12); border-radius: 8px; ;

const Title = styled.div display: flex; flex-direction: row; gap: 4px; margin-top: 18.5px; margin-left: 16px; ;

const TitleText = styled.div font-family: "Open Sans"; font-style: normal; font-size: 10px; line-height: 17px; align: left; letter-spacing: 0.4px; color: #6877AE; ;

const StyledIcon = styled(FontAwesomeIcon)({ fontFamily: "Font Awesome 6 Pro", fontSize: "12px", color: "#6877AE", lineHeight: "12px", marginTop: "2px"

});

const ChartData = [ { value: 70, date: "10-Jan-2019" }, { value: 71, date: "10-Feb-2019" }, { value: 72, date: "11-Feb-2019" }, { value: 68, date: "10-Mar-2019" }, { value: 67, date: "11-Mar-2019" }, { value: 67, date: "11-Mar-2019" }, { value: 72, date: "10-Apr-2019" }, { value: 76, date: "10-May-2019" }, { value: 78, date: "10-Jun-2019" }, { value: 80, date: "10-Jul-2019" }, { value: 78, date: "10-Aug-2019" }, { value: 80, date: "10-Sep-2019" }, { value: 77, date: "10-Oct-2019" }, { value: 74, date: "10-Nov-2019" }, { value: 72, date: "10-Dec-2019" } ];

export const LineChart = () => { useLayoutEffect(() => { const div = document.getElementById("apache_echarts_line_chart") as HTMLDivElement; if (!div) { return; } //TODO: Understand the difference between using canvas vs. svg const chart = echarts.init(div, undefined, { renderer: "canvas" });

    const parentDiv = div.parentElement;
    if (!parentDiv) {
        return;
    }

    const getDates = () : string[] => {
        const dates: Array<string> = [];
        ChartData.forEach(item => {
            dates.push(item.date);
        });

        return dates;
    };

    const getValues = () => {
        const values: Array<number> = [];
        ChartData.forEach(item => {
            values.push(item.value);
        });
        return values;
    };

    chart.setOption({
        grid: {
            left: 55,
            top: 70,
            right: 21,
            bottom: 35
        },
        tooltip: {
            trigger: "axis",
            showDelay: 20,
            triggerOn: "mousemove"
        },
        xAxis: {
            type: "category",
            data: getDates(),
            boundaryGap: false,
            axisLabel: {
                formatter: function (value: any) {
                    const date = new Date(value);
                    return date.toDateString().split(' ')[1];
                }
            }
        },
        yAxis: {
            type: "value",
            name: "Views",
            nameLocation: "middle",
            nameGap: 25,
            nameTextStyle: {
                color: "#000000",
                align: "left",
                fontWeight: 400,
                fontSize: 8,
                lineHeight: 21.28,
                //padding: [0, 0, 0, -10]
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: "views",
                data: getValues(),
                type: "line",
                smooth: true,
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
                        {
                            offset: 0,
                            color: 'rgba(0, 65, 205, 0.21)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 65, 205, 0)'
                        }
                        ]
                    )
                }
            }
        ]
    });
    const resizeObserver = new ResizeObserver(() => chart.resize());
    resizeObserver.observe(div.parentElement);

    chart.on('click', function (params) {
        console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
        console.log(params);
    });

    return () => {
        resizeObserver.disconnect();

        //TODO: Understand when "dispose" is needed
        chart.dispose();
    };
}, [ChartData]);

return (
    <Container>
        <Title>
            <StyledIcon icon={faEye} />
            <TitleText>
                Views over time
            </TitleText>
        </Title>
        <Content id={"apache_echarts_line_chart"} />
    </Container>
);

}; `

2- as you can see i'm trying to register the following event: chart.on('click', function (params) { console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa"); console.log(params); });

but i can't see any output in the console, please advice

Current Behavior

can't see any output in the console from the event: chart.on('click', function (params) { console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa"); console.log(params); });

    Please advice

Expected Behavior

see the console log when clicking on the chart

Environment

- OS: Win 11
- Browser: chrome

Any additional comments?

No response

[echarts-bot[bot]]

I'm sorry to close this issue for it lacks the necessary title. Please provide a descriptive and as concise as possible title to describe your problems or requests and then the maintainers or I will reopen this issue.

Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.

A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.

Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.

[Ovilia]

The click event only works on data items, which is the bars in bar series, pie pieces in pie charts, points in scatter charts and etc. If you need further help, please simplify your code.

[echarts-bot[bot]]

@NourSaleh91 Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

[NourSaleh91]

@Ovilia thanks for the fast response, it would be much appreciated if you could guide me to build these requirements:

I need to have different behavior on hover and click events, on hover the tooltip will be displayed as expected until we move the mouse to the next data point/ item

on click event, I need to fix the tooltip to be displayed all the time until we click on another data point/item (and then the tooltip for the new clicked item will be displayed) or click outside the chart

is that possible and what is the best way to do it?

requirements:

• hover - tooltip will have a delay of 1 sec
• click - tooltip stays when click. when clicking outside or on a different widget the tooltip is closed

[Ovilia]

Please provide a minimum demo first to let others understand what you are working with.

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!