CODEWITHSUNDEEP
javascriptangulartypescriptchartsecharts
P. Mark
P. Mark

Reputation: 121

How to mark a point on an Apache Echarts chart?

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:

enter image description here

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

Upvotes: 2

Views: 5861

Answers (2)

Nicolas Zozol
Nicolas Zozol

Reputation: 7048

You need to use markPoint object

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

Editable exemple (line 84): https://stackblitz.com/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).

Upvotes: 2

Linda Paiste
Linda Paiste

Reputation: 42288

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 component 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

Upvotes: 3

Related Questions