Reputation: 121
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.
Upvotes: 2
Views: 5861
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
Reputation: 42288
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",
}
}
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;
}
}
Upvotes: 3