I have a line chart and how to mark a point with click and get value of this point? If I hover the mouse over a point:

But how do I mark point with a click? I want the mark to stay there and get value of this point.

I have a line chart and how to mark a point with click and get value of this point? If I hover the mouse over a point:

But how do I mark point with a click? I want the mark to stay there and get value of this point.

• javascript
• angular
• typescript
• charts
• echarts

Share Improve this question Follow edited Mar 11, 2021 at 14:36 Mr. Polywhirl 48.9k1212 gold badges9494 silver badges145145 bronze badges asked Mar 11, 2021 at 14:24 P. MarkP. Mark 12111 gold badge55 silver badges1212 bronze badges 2

• 1 Could you please post all the code for your current build here so we can see and work with your code? – Brandon McConnell Commented Mar 11, 2021 at 14:27
• You start by reading the documentation for what ever charting library you are using. – R. Richards Commented Mar 11, 2021 at 14:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Showing the Tooltip on Click

This is actually supported by Apache ECharts out of the box just by changing your chart options. You want to set tooltip.triggerOn to 'click' instead of 'mousemove'. For example:

const options = {
  /* ... other options ... */
  tooltip: {
    show: true,
    trigger: "axis",
    triggerOn: "click",
  }
}

Tooltip Documentation

Accessing the Value

You want to get the value from the tooltip when it is clicked/shown. For that we use events and add a callback to the showTip event.

chart.on("showTip", console.log);

I don't do much Angular so this might not be the best code, but it works!

import { Component } from "@angular/core";
import { init, ECharts, EChartOption } from "echarts";

@Component({
  selector: "app-root",
  template: `
    <div id="echarts-container" #chartContainer>
      Content
    </div>
  `,
  // needs a minimum height
  styles: ["#echarts-container { height: 100vh; }"]
})
export class AppComponent {
  private chart?: ECharts;

  ngOnInit() {
    // I bet there is a more angular-specific way to access the element
    const chartContainer = document.getElementById("echarts-container");
    if (chartContainer instanceof HTMLDivElement) {
      this.initializeChart(chartContainer);
    } else {
      throw new Error("invalid element");
    }
  }

  ngOnDestroy() {
    this.chart?.dispose();
  }

  private doSomethingWithTooltipValue(value: number, label: string) {
    // we've got access -- now what do you want to do?
    console.log(`activated tooltip with label: ${label} and value: ${value}`);
  }

  private initializeChart(element: HTMLDivElement) {
    const option: EChartOption = {
      // some example data
      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"
        }
      ],
      // show the tooltip on click
      tooltip: {
        show: true,
        trigger: "axis",
        triggerOn: "click"
      }
    };
    const chart = init(element);
    chart.setOption(option);
    chart.resize();
    chart.on("showTip", ({ dataIndex, seriesIndex }) => {
      // TODO: would need to be more specific about the data types in order to lookup like this
      const label = option.xAxis.data[dataIndex];
      const value = option.series[seriesIndex].data[dataIndex];
      this.doSomethingWithTooltipValue(value, label);
    });

    // save chart instance to ponent so we can dispose of it in ngOnDestroy
    // there might be a more angular-specific way to do this
    this.chart = chart;
  }
}

Code Sandbox Link

You need to use markPoint object

API documentation: https://echarts.apache/en/option.html#series-line.markPoint

Editable exemple (line 84): https://stackblitz./edit/echarts5-log-max-issue-l6ofst?file=opt1.js

You can use as a marker a pinpoint, circle ... or any image (see markpoint.symbol in the API).