Question 239084 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Echarts line chart. Event on click line

How can I fire event on click line (not dots) on line chart using Echarts.

This code fires only if I click the dot on chart

myChart.on('mouseup', function (params) {
  console.log(params);
});

Do you now any other library where it is possible?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Need to add to triggerLineEvent: true in series

    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      triggerLineEvent: true,
    },
    {
      data: [0, 230, 224, 218, 135, 147, 260],
      type: 'line',
      triggerLineEvent: true,
    }
  ]
};

myChart.on('click', function (params) {
    console.log(params);
});

  2. 0

    ECharts doesn’t provide a built-in event for clicking on a line itself in a chart. The interaction events are usually associated with dots on the chart.
    You have basically two options. You can do a workaround by adding invisible data points along the line at regular intervals and then binding click events to those invisible data points. This would create an illusion of clicking the line itself. Or you can switch to a totally different library. D3.js is a highly flexible library that allows you to create custom visualizations with more control over events. However, it also has a steeper learning curve compared to libraries like ECharts.

    Edit:
    Here is also my most minimal example of how you could achieve this with D3.js
    https://jsfiddle.net/kwbfxjau/

    <!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg id="chart" width="400" height="300"></svg>
  <script>

    const data = [
      { x: 0, y: 5 },
      { x: 1, y: 9 },
    ];

    const svg = d3.select("#chart");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    // Define scales
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.x)])
      .range([0, width]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.y)])
      .range([height, 0]);

    // Define line generator
    const line = d3.line()
      .x(d => xScale(d.x))
      .y(d => yScale(d.y));

    // Append line to the SVG
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "red")
      .attr("stroke-width", 8)
      .attr("d", line)
      .on("click", handleLineClick);

    function handleLineClick(event) {
      console.log("Line clicked! Please upvote and accept");
    }

  </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search