I'm using reactJs to develop the frontend, is it possible to make annotations on graphs created by echart? For example, I can left-click anywhere on a line chart to make a quick note of that point or I can a range on a graph and make a note of that range.
1 Answers
If I understand you correctly, you want to build an interface that allows users to left-click somewhere on the chart and add their own annotations (rather simply coding in annotations as a developer, and having them be static)?
In broad strokes, here's how I would build this:
- Register click event handlers on the chart, so you can detect where the user clicked.
- Build custom UI in react that can overlay on the chart, provide text input and "add"/"cancel" buttons, using the information from the click event to figure out where to draw it and to what element the annotation should be attached to.
- When the user clicks "add", make a call to the
showTipAPI (see docs) to a tooltip in the right location (from step 1) with the text the user provided.
(It looks like there is a github issue where folks are asking for this feature to be built-in - and some discussion of how to build it yourself, and a simple example that illustrates how to do step 3 above which you might find useful)
Related